Disclaimer

Introduction

Introduction >

Introduction

 Return to chapter overview

We have included this online guide so that everyone who wants to get started immediately with WebSite X5 to create their own websites, blogs and e-commerce stores can do so, with all the help they need at their fingertips.

Each step of the project development is accompanied by a clear description of every part of the Program's interface that you work on, with a detailed explanation of all the commands and options available in the various menus, panels and windows.

With the explanations and information given in this guide, the logical and easy-to-follow work sequence and the additional help of previews of your work that are updated in real time, you'll have no problem using WebSite X5 to create eye-catching, interesting and professional websites.

This WebSite X5 guide refers to the Evolution v. 10 version but may be used in conjunction with other versions of the Program, bearing in mind the specific functional differences between the various versions.

The guide is organized in three sections:

- | The work environment This section describes all the functions provided by the software, in the various windows that open while you are creating and publishing your website.
- | Best Practices This section contains tutorials that simulate all the steps involved in carrying out certain specific tasks, such as assigning passwords to Members' Areas and creating data-submission forms.
- | Further information This section contains further information on various topics that are related to website creation.

Last update: version 10


WebSite X5: What it does

Incomedia WebSite X5: What it does

Introduction >

Incomedia WebSite X5: What it does

 Return to chapter overview

Incomedia WebSite X5 lets you create websites, e-commerce shopping carts, blogs, digital photo albums and interactive presentations easily and quickly. The projects are developed with a web-like structure and organized in menus with various levels: there is no limit to the number of pages you can add.

Each page can have a different layout, and you can complete it with many different kinds of objects: text, images, tables, galleries, videos, audio, e-mail forms, social networks, a guest book, maps, Flash™ animation, product lists, HTML objects and widgets.

WebSite X5 offers numerous interesting features for editing pictures, which means you won't need any other graphics programs. Pictures are automatically compressed when they are saved so you don't even have to worry about optimizing your photos before including them in a page.

You can now create a complete and professional website with easy-to-use, tools: a huge number of graphic templates, an editor for creating 3D buttons, plenty of possibilities for graphics customization, adding an introduction, offering a choice of language to display your website in, password-access Members' Areas, blogs, RSS feeds and online stores with credit card facilities, to name but a few.

And, when you're ready, WebSite X5 has a built-in FTP (File Transfer Protocol) engine for publishing your website on the Internet so you don't need any external FTP programs.

Working with WebSite X5

WebSite X5 acts like a wizard, which means it behaves like a visual guide that takes you through each step of the way to creating a complete, functional and attractive website that you'll be proud of!

There are just 5 steps between your idea of the perfect website and having it published and visible on the Internet:

1. General Settings

Once you have decided on your project, and given some initial general information, such as a description and keywords that are used by the search engines for indexing your website, WebSite X5 then helps you define the look of your website. You can choose from over 1.500 default templates or, if you prefer, you can create your own template from scratch. You can use the built-in editor to customize both the heading and footer as you like.

2. Sitemap Creation

Starting from the Home page, with WebSite X5 you begin by defining the hierarchical structure of your website. You can include as many levels and sub-levels as you need, with an unlimited number of pages. Your navigation menu will be created automatically, on the basis of the website Map. You can change your Map at any time, if you want to make changes or update the website.

3. Page Creation

You can create pages and work on their layout by simply dragging and dropping the objects that are available: text, tables, images, animation, video and audio, galleries, forms for data submission and e-mails, social networks, your guest book, the website Map, the product list, HTML and Widget code. You can customize the imported objects and finish them off with links to both internal and external objects. With the built-in graphic editor, you can rotate, correct or apply filters, masks and frames to pages that you have imported, without having to use any extra software.

4. Advanced Settings

Once you have customized your website, you can then go on to define the style of the various elements that will appear in your website, such as the navigation menu, the various text elements, the Showbox window and your e-mails. The built-in editor lets you create 3-D buttons, which can have a special effect on mouseover. You can complete your website with features such as a Welcome page, which can have a soundtrack associated with it, and a choice of languages to read the website in, and you can also create Members' Areas with login and password access, include advert banners, RSS feeds, a blog and even an online store for e-commerce.

5. Export

WebSite X5 helps you through the process of publishing your finished website on the Internet: you can start an FTP session, where all the files that are necessary for giving your website Internet visibility are transferred to a server. WebSite X5 supports secure sessions and saves you time with simultaneous connections and intelligent publishing of only the files that have been changed.

As well as publishing your website on the Internet, you can also export your project to another disk on your computer, or create a backup copy of the entire project.


Available versions

Introduction >

Available versions

 Return to chapter overview

WebSite X5 is available in various versions, the main ones being: Evolution and Compact.

To find out more about the differences between the various versions, go to http://www.websitex5.com/compare


Presenting WebSite X5

The work environment >

Presenting WebSite X5

 Return to chapter overview

Create websites, online stores and blogs in 5 steps

WebSite X5 is the ideal software for creating the websites you've always wanted. You don't need to know anything about programming! This software gives you an intuitive and fully-visual interface to work with, and you can check your work as you go with the previews that are updated each time you take a look.

WebSite X5 guides you through each step of creating your website and publishing on the Internet. It's extremely easy to use, it's flexible and it offers you plenty of scope for your own personal customization.

WebSite X5 automatically generates page code in HTML5 + CSS 2.1 or 3 for the choices you make and the settings you define in each page, guaranteeing full compatibility with all browsers and mobile devices, as well as accurate search engine indexing.

Professional web tools

WebSite X5 is so easy to use that you'll have no problem incorporating sophisticated professional features in your website, such as:

§Online stores with credit card facilities

§Blogs with podcasts and videocasts

§A built-in search engine

§E-mail forms with anti-spam filters

§News and RSS Feeds

§Zoom and wide-angle photos

§Photo and video galleries

§Access management

§Advert banner management

§Multi-language websites

An all-in-one solution

What's more, with WebSite X5 you'll save time and energy because it already includes everything you need to create a complete website:

§Template editor

§Image editor

§Menu generator

§Built-in FTP engine

§1.500 customizable templates

§6,000 royalty-free photos

§Buttons libraries

§Widget collection

This mix of simplicity and sophistication (in terms of the number and quality of features included) is the key to WebSite X5's success: it's simply the right software for everyone who wants a website!


The work environment

The work environment >

The work environment

 Return to chapter overview
Show/Hide hidden text

As we have already said, WebSite X5 acts like a wizard, which means that when you work with it, you're taken through each step like a guided tour: at each part of the procedure, a window opens in which you can enter or add the necessary information to create, update and publish a complete, professional and eye-catching website online.

All the windows that are shown by the Program have the same graphic interface: they all have the same top, side and bottom button bars and a central work-area window that changes according to the part of your project you're working on and the kind of information you need to include.

Click to expand/collapse
The work environment
Click to expand/collapse Top button bar

The top button bar includes the commands that you need to have available all the time, regardless of what part of the project you are working on. These commands are mainly for opening the online help and retrieving information on the Program's state, saving the project and making a backup copy of it and for opening a preview of your work in the Program's own browser.

§Help: this command opens the online help. Use the left arrow of the Help button to see other commands:

-Summary...: opens the online help.

-Video Tutorial: opens a web page with a list of video tutorials which explain how to start working with WebSite X5.

-WebSite X5 Gallery: opens the WebSite X5 Answers section that contains websites created with WebSite X5 that have been submitted directly by their authors.

-WebSite X5 Templates: opens the section of WebSite X5 Answers that is dedicated to the templates. It contains new templates that have been created by Incomedia and by other authors, and they can be displayed and downloaded. Some of them are free!

-Technical Support: opens WebSite X5 Answers, the website that provides technical assistance for WebSite X5. On WebSite X5 Answers you can look through the FAQs and the tutorials, or you can send a request for assistance.

-www.websitex5.com: opens WebSite X5's website.

-About WebSite X5: displays general information on the WebSite X5 version installed on your computer.

§Save [CTRL + S]: saves the current project. The project is automatically saved in Projects folder specified in the Preferences window. You can use the left arrow of the Save button to see these commands:

-Save at every Preview: automatically saves the project each time you use the Preview command to display a preview of your website.

-Create a Backup Copy when saving the Project the first time: automatically creates a backup copy of your project (Backup.iwprj file) after the first time you save in the current work session.

-Create a Backup Copy every time you upload: automatically creates a backup copy of your project (Uploaded_timestamp.iwprj file) before you publish it on the Internet.

The backup copies that are created by the Create a Backup Copy when saving the Project the first time and Create a Backup Copy every time you upload functions are saved in the Backup subfolder which you specify in the Preferences window and can find in Projects folder.

If you want to create a backup copy of your project, instead of using a Save as command, you can use the Duplicate in the Project Selection window.

-Preview: displays a local preview of your website so far, using the program's built-in browser.

If you leave the Update the Pages while modifying the Project option active in the Preferences window, each time you make a change (and click on an OK or Next button to save it) the Program recreates and updates everything that the change refers to. This means that the website preview is kept constantly updated, and will be displayed correctly immediately you choose to see it.

You can also select the Save at every Preview option so that the project will be saved every time you click on the Preview button.
Click to expand/collapse Side button bar

WebSite X5 takes you through the work of creating a website in just 5 steps. The buttons on the left side of the Program window, which are always available, indicate which step you are currently working on and you can use them to move from one step to another (you don't have to follow the order in which they appear).

 | Project Selection
1. | General Settings
2. | Sitemap Creation
3. | Page Creation
4. | Advanced Settings
5. | Export
Click to expand/collapse Bottom button bar

The bottom button bar has the buttons you need for moving around the Program:

§Back: takes you back to the previous window, in case you want to make further changes.

§Next: takes you to the next window, to continue creating your website.


Welcome to WebSite X5

Welcome to Incomedia WebSite X5

The work environment >

Welcome to Incomedia WebSite X5

 Return to chapter overview

The Welcome page is the first window you see when you start WebSite X5. It includes a number of links to online resources and material that may be of help to you when you are working with the Program. These links are available in a side button bar that looks like this:

Video Tutorial: opens a web page with a list of video tutorials which explain how to start working with WebSite X5.

WebSite X5 Gallery: opens the WebSite X5 Answers section that contains websites created with WebSite X5 that have been submitted directly by their authors.

WebSite X5 Templates: opens the section of WebSite X5 Answers that is dedicated to the templates. It contains new templates that have been created by Incomedia and by other authors, and they can be displayed and downloaded. Some of them are free!

WebSite X5 Answers: opens WebSite X5 Answers, the website that provides technical assistance for WebSite X5. On WebSite X5 Answers you can look through the FAQs and the tutorials, or you can send a request for assistance.

Check for Updates: checks whether there are any updates available online for the version of WebSite X5 you are working with. We strongly advise you to always check for and install new updates, to ensure you get the best out of your software.

Preferences: opens the Preferences window, where you can define some general settings on how you want the Program to work.

Besides this side button bar, the Welcome page also includes information which is updated in real time when you are connected to the Internet. This information refers to the latest versions available online of your Program copy, news, special contents (which may be articles, white papers, tips&tricks), new video tutorials and the latest discounts and special offers.

If an Internet connection is not available, the Welcome page shows a standard page. This page will be shown even when the Check for updates at program startup option in the Preferences window is not selected.

When you have finished looking through the contents of the Welcome page, you can begin work on creating your website by clicking on the Start button.


The Preferences window

The work environment >

The Preferences window

 Return to chapter overview
Show/Hide hidden text

This window opens when you click on the Preferences button in the Welcome page, and here you can give some general settings for how the Program is to work.

Click to expand/collapse Reference: The commands in the Preferences window

The options in the General section are:

§Projects folder: this is the folder in which your project file (Project.IWPRJ) is saved, whether you are creating a new project or importing an existing one (see Project Selection | Import...). Because the folder is already indicated, when you click on the Save button when you are working on your website, the project will be saved in this folder without you being asked to indicate where it should be saved.

§Check for updates at program startup: this option means that new software updates will be looked for each time the Program is started. The Program starts an Internet connection to the Incomedia server to search for any updates.

We advise you to leave this option selected, so that you can be sure you are always working with the latest available version of WebSite X5.

The options for File Creation are:

§Keep Preview updated while working on the Project: makes sure that the website preview is constantly updated with all the developments in your project. This basically means that every time you add something new or make a change to something, and click on an OK or Next button), the Program automatically updates the website preview which you can view locally on your PC using the built-in browser.

§Update the Pages while modifying the Project: synchronizes the pages you create in your website while you are working on your project. So, each time you confirm an addition or change (by clicking on an OK or a Next button), the Program recreates all the parts in other pages in the project that are affected by the new part. This feature keeps the website preview updated and if you click on the Preview to check your progress, you'll see all the additions/changes immediately.

§Max number of simultaneous processes: means you can define the number of processes (or "Threads") that the Program starts, and that will be carried out simultaneously by the computer.

What is Multithreading?

It's a technique whereby one process is divided into several, smaller processes which are carried out at the same time. Obviously, you computer has to be able to handle this. The Multithreading feature makes the most of the computer's calculating power, making it work on several threads at the same time. Thanks to this technique, programs such as %PRODUCT%>, that have been developed to spread the work load over a number of different threads, can noticeably improve performance.

You need to correctly evaluate your computer's hardware capacity to be able to take full advantage of Multithreading. Try starting with 5 simultaneous processes and gradually increase this value until you don't notice any further significant improvements in performance.

Finally, the Local Preview WebServer settings options handle the correct display of website previews:

§Port: is the port that WebSite X5 tells its local web server to watch so that the website previews are displayed correctly.

§IP Address: is the IP address that WebSite X5 tells its local web server to keep an eye on so that the previews of your website come up as you expect them to. The default value for the IP address option is 127.0.0.1 which always identifies the local (your) computer. Most people won't need to change this value.

We advise you not to change the values that you find already set for the Port and IP Address options, unless you are absolutely sure of what you're doing.

Best practices:

- | How to organize your projects in WebSite X5
- | How to organize the project backup copies


Passo 0 - Project Selection

Project Selection

Step 0 - Project Selection >

Project Selection

 Return to chapter overview
Show/Hide hidden text

After you have started WebSite X5 and seen the Welcome Page, you can go to the Project Selection window, where you have to indicate the project you want to work on.

You can choose whether you want to create a new project or whether you want to work on one that you have already created.

Click to expand/collapse Reference: Commands in the Project Selection window

§Create a new Project: choose this option if you want to start work on a new project. First of all, you have to give the new project a name: type a name in the field below. You can save the project by clicking on the Save button, which is always present in the top button bar.

You don't need to specify a path when you save a project because the program takes care of that by saving all your projects in the Projects folder which is defined in the Preferences window.

§Edit an existing Project: this option lets you open an existing project, so that you can add new contents to it or make any necessary changes. All the names of existing projects are shown in a list. There are a number of choices available for selecting and opening the project you want to work on, and they are:

Display Large icons - Display Titles - Display List - Display Details

These options define how the project previews are displayed.

Display Groups according to last edit date

This option groups and displays the projects according to their last edit date.

Use the following commands to organize your projects:

§Import...: this command imports a project that has been created and exported (see Export the Project) with WebSite X5 from another computer.

§Rename: use this command to change the name of the selected project. You can also click twice on a project name to change it.

§Duplicate: makes a copy of the selected project.

§Delete: deletes the selected project.

Best practices:

- | How to organize your projects in WebSite X5
- | How to organize the project backup copies


General Settings

Step 1 - General Settings >

General Settings

 Return to chapter overview
Show/Hide hidden text

This is the first window of Step 1. The information you enter in the various fields of this window set the basic parameters for the project you are working on

Important information such as the project title, the URL (website address), the language to be used and codes and meta tags that are needed to activate extra services such as website statistics is entered in this window. You can choose whether to enter this information immediately or do it later.

The options in this window are organized in two sections: Basic e Expert.

Click to expand/collapse Reference: Options in the Basic section

§Website Title: enter the title you want to give your website in this field. The title will be shown in the browser's title bar when your website is published on the Internet. It's obviously an important parameter because it allows visitors and search engines to correctly identify your website.

The default entry in this field is the name you have given to the project (see Project Selection) and you can change it at any time: you may decide on a better name, or you may want to change it to try and improve optimization.

§Website Author: enter the name of the person, business, club, etc who is to appear as the author of the website. The author's name appears in the <author> meta tag of all the website pages' HTML code, and it is the electronic equivalent of signing the work that has been done.

§Website Address (URL): enter the URL address (for example http://www.mywebsite.com) where the website will be located when it is published on the Internet. This information is essential for RSS feeds, the e-commerce shopping cart and the SiteMap to work correctly (this latter is created automatically by the Program and linked to the various website pages).

§Website Description: enter a short description of the website in this field. Make sure the description is concise and to the point because it will be added to the <description> meta tag in the HTML code and analyzed by search engine spiders to include your website in search results.

§Website Keywords: enter a list of keywords (separated by commas) that are relevant to your website. The keywords will be added to the <keywords> meta tag in the HTML code and these too may be used by search engines to find your website.

The Website Description and list of Website Keywords that you enter in these fields are automatically associated with the website's Home page.

You can, however, improve website optimization by associating a description and a list of keywords with each page (or, at least, to the most important ones). To do this, go to Sitemap Creation, select the page to work on and click on Properties....

§Content Language: enter the language you want to use for your website in this field. All the text that is entered automatically by the Program will be shown in the language you choose here: links to built-in anchors, labels for the E-mail Form Object, labels and text for the e-commerce shopping cart, text in the website's Map.

If you want to change the text that the Program enters automatically, or you want to add a new language, click on the [image] button and use the options in the Language Content Management window.

§Website Icon: enter the name of the icon (a .ICO, .PNG, .GIF or .JPG file) to associate with the website's pages. This icon will be displayed to the left of the URL in the Internet browser's address bar.

Icons associated with websites are often referred to as favicons (from favorite icons). You can use images in .ICO, .PNG, .GIF and .JPG formats. Files in .ICO format are imported as they are, whereas if you use files of any size in .PNG, .GIF and .JPG format WebSite X5 automatically creates a copy in .PNG format at 16x16 pixels and uses this copy as the favicon.
Click to expand/collapse Reference: Options in the Expert section

§Custom Code: indicate where custom code is to be added in the page's HTML code: Before closing the HTML tag, Before closing the HEAD tag, BODY tag property (ie: style, onload, etc.) (that is, as part of the <BODY> tag, for example <BODY onload="alert('Hello!')">), Before closing the BODY tag, After closing the BODY tag. When you have decided where to add your custom code, type in or paste the section of code in the field.

This field can be used, for example, to activate a statistics service on site accesses such as Google Analytics™.

For more information on Google Analytics™ and to open an account, click on the [image] button to access the official site: http://www.google.it/analytics/.

§Verification metatag for Google Webmaster Central: enter the control meta tag to use the Google Webmaster Central™ tools.

For more information on Google WebMaster Central™ and to open an account, click on the [image] button to go to the official site: http://www.google.com/webmasters/.

§Automatically create a SiteMap: this is active by default, and the SiteMap will be automatically created and linked.

For the SiteMap to be created correctly, you must enter a valid URL in the Website Address (URL) field in the General Settings | Basic window.

§Enable HTML Code Protection: this enables protection for published website pages, disabling right button mouse clicks. The visitor will not be able to view the pages' source code online using the commands in the context menu that opens when the righthand mouse button is clicked on the pages.

Best practices:

- | How to translate text that is entered automatically
- | How to use Google Webmaster Central™
- | How to subscribe to a statistics service such as Google Analytics™

-

How to create and link the website's SiteMap

Further information:

- | HTML, HTML5 and CSS
- | Web browsers and the WebSite X5 browser
- | Search engines and SEO optimization


The Language Content Management window

Step 1 - General Settings > General Settings >

The Language Content Management window

 Return to chapter overview

This window opens when you click on the [image] button of the Content Language option in the General Settings | Basic window. You can work on the text that the Program enters automatically, such as links to built-in anchors, the buttons in the Gallery Object, the labels in the E-mail Form Object, labels and text in the e-commerce cart, text in the website's Map.

The Language Content Management window shows the list of available languages on the left and a table with the translations in the various languages on the right. The first column of the table gives indications of whereabouts in the Program the various items are used. Then there is column for each active language (i.e. selected from the list of available languages). You can work directly on this table to add or edit new items.

The Language Content Management window shows the following buttons:

Add a new Language: enter the name of a new language to add in the dialog box. You must use the format "ID - LanguageName", for example "EN - English".

Remove the selected Language: this will remove the selected language from the list.

Import a new Language: this imports a new language, saved as a .XML file, and adds it to the list of available languages.

Export the selected Language: this exports the language selected from the list to a .XML file.

The Export the selected Language and Import a new Language options are useful when you want to save translations in a particular language in a .XML file and use it on another computer.

Best practices:

- | How to translate automatic text
- | How to create a multi-language website


Template selection

Step 1 - General Settings >

Template selection

 Return to chapter overview
Show/Hide hidden text

One of the keys to a successful website is an attractive appearance. First impressions count, and new visitors' opinions on your website will be largely influenced by its graphic layout, before they even start to look through the contents. A well thought-out and professional-looking design gives the impression of a good quality site that is worth looking at.

WebSite X5 gives you two possibilities for designing your website:

1. you can create a custom template, either starting from scratch or from one of the default templates;

2. you can use a default template, choosing from a gallery of over 1.500 templates already included with the Program.

Both the custom templates and the default templates can be changed at will and added to, using the many features offered by the built-in editor shown in the Edit Graphic Template window.

All the default templates are optimized to be displayed at 1024 x 768 pixels. If you want to use a different resolution, use the Custom Template.
Click to expand/collapse Reference: Commands in the Template selection window

Most of the Template selection window is dedicated to displaying the available templates. You can use the following commands to filter the templates on display, if this makes it easier for you to choose which one you want to use:

List of Categories

This option shows a list of the various categories in which the templates are organized, so you can choose which ones to display. The first category contains all the custom templates that have been created from scratch, and you will only see it if at least one such custom template exists. The following categories contain the various default templates that are available.

Menu

This option filters the default templates according to the type of menu they propose, so you can choose to display templates with either horizontal or vertical menus, or both.

Show Small Preview - Show Medium Preview - Show Large Preview

These options define the way in which template previews are displayed.

Edit the Template Hue

This option opens the Template Hue window where you can change the color tone of the selected template.

The following commands are available for working on the templates:

§New Template: this starts the process of creating a new custom template from scratch. These templates will be added to the Custom category.

§Rename: use this command if you want to rename a template. It can only be used on custom templates. You cannot change the name of default templates. You can also rename a custom template by clicking twice on its name.

§Duplicate: this command makes a copy of the selected template.

§Remove: this command deletes the selected template. You can only use it on custom templates: default templates cannot be deleted.

§Edit...: this command opens the selected template in the Edit Graphic Template window so that you can edit it. It can only be used on custom templates. If you want to edit a default template you must first make a copy of it, by clicking on the Duplicate button.

§Import...: this command imports a new template (a .IWTPL file) that has been created with WebSite X5 and exported.

§Export...: this command exports the selected template (a .IWTPL file) to the specified folder. It can then be shared and used on other computers.

Notes on compatibility with the previous versions:

§Horizontal / Vertical Menu - In previous versions of the program (up to version 8) the choice between horizontal and vertical menus was made in the Menu Selection window, and in version 9 there was a specific Menu Type option. In version 10, you just have to select the default template that has the type of menu you want. If you create a custom template you have to set Menu Type with the related option.

§Colors - In version 8, each default template was available in four different colorways. In version 9, the colorways were replaced by color styles, which offered different color palettes, settings and graphics. In version 10 the distinction between style variations has been eliminated: now, each template has its own particular style and/or settings, and each one appears in the complete template list.

Best practices:

- | How to work with the templates
- | Where to find new templates for WebSite X5


The Template Hue window

Template selection | Template Hue

Step 1 - General Settings > Template selection >

Template selection | Template Hue

 Return to chapter overview

This window opens when you press the [image] button in the Template selection window. You can change the color hue in the custom or default template you are working on.

To set the color hue you want, just slide the cursor of the Hue control to the left or right.

Thanks to this option, there are practically no limits to the number of graphic variations of a template.

Color hue variation regards all the elements of the template, although its effects are not visible on black, white and shades of gray.

Best practices:

- | How to work with the templates
- | Where to find new templates for WebSite X5


Custom Template

Step 1 - General Settings >

Custom Template

 Return to chapter overview
Show/Hide hidden text

WebSite X5 lets you create your own custom template, starting from scratch. Click on the New Template button in the Template selection window to bring up a preview of a new template in the Custom category: double-click on the preview to open the Custom Template window, where you can start creating your template.

To make your work easier, the Custom Template window offers a Preview that shows a graphic representation of the page. You can choose which section of the page to change from the list, or click on a part of the preview to edit it and see the changes appear in the preview as you make them.

Click to expand/collapse Reference: Menu type options

Before you start creating a custom template, you have to specify the Menu Type, which defines where and how the navigation menu will be displayed in all the website pages. The options are:

Horizontal - Menu above the header

Horizontal - Menu below the header

Vertical - Menu on the left

Vertical - Menu on the right
Click to expand/collapse Reference: Page section options

When you have chosen the menu type you have to select the Page section that you want to work on. Pages are divided into the following sections:

Page Background: this is the area surrounding the page. It's on view when the browser's window has a higher resolution than that set for the actual website.

Header Background: this is the part of the Page Background which is behind the Header.

Header: the header is at the top of the page. It normally contains mostly graphic elements, and is the ideal place for the website's title and subtitle, a company logo, search fields, service menus with links to such elements as the website's map and the website language choice.

Menu: this is where the fixed navigation menu appears. This menu displays the first-level choices available, which appear in exactly the same way on every page of the website. This section will be either at the top, bottom, left or right of the page, depending on the menu type you have previously chosen.

Page Contents: this section contains the actual page content and any submenus, if you have them.

Footer: this section is at the bottom of the page and, like the header, is mainly graphic. It visually closes the page. It is often used for placing notes, disclaimers, copyright indications, VAT numbers, e-mail addresses, etc.

Footer Background: this is the part of the Page Background that is behind the Footer.

If you set the Header Background or Footer Background as Transparent, they will be treated as part of the Page Background and will have exactly the appearance. If they aren't Transparent then the Header and/or Footer will be shown as strips that cover the whole width of the browser's window.
Click to expand/collapse Reference: Page section graphics properties

You can set the following Graphic Properties for all the various page sections:

§Color: indicates the color to use for the background.

§Image File: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background. You can also have Flash animation (.SWF) in the Header or Footer.

§Repeat: this indicates whether the background image is to be repeated. Images can be repeated horizontally, vertically, or in both directions so that it takes up all the available space. If you are working on the Page Background the image can be resized so that it covers the entire background. In this case, the original proportions may not be maintained.

§Alignment: indicates how the image is to aligned in the particular page section.

The following option is also available for the Page Background:

§Fixed Background: if you select this option, the page's background image is fixed, even when the page contents are scrolled.
Click to expand/collapse Reference: Page section sizes

You can set the Size for some of the page sections.

The following option is available for the Header and Menu:

§Width: gives the width in pixels of the selected page section. The value of Width for vertical menus is by default 960 pixels for the Header section and 120 pixels for the Menu section, and both values can be changed. The value of Width for horizontal menus that is set for the Header is also used for the Menu, Page Contents and Footer.

The default value of the Width is calculated for a website that is optimized for a display resolution of 1024x768 pixels.

The following option is available for sections, apart from the Page Background and Page Contents:

§Height: gives the height in pixels of the selected page section.

The following option is only for the Page Contents section:

§Minimum Height: gives the minimum height in pixels that the page contents section must have, regardless of the height of the contents that are added.

Click to expand/collapse Reference: Page section content properties

You can define Content Properties for some page sections.

The following option is available for the Page Background, Menu and Page Contents sections:

§Margins: gives the value in pixels of the margins (the empty space between the edge of the section and its contents).

This option is available for the Page Background and Menu sections:

§Alignment: for the Page Background, it specifies how the page is to be aligned in the browser's window; for the Menu it specifies how the menu buttons are to be aligned with respect to the page.

The actual width of the website pages is given by the width of the Page Contents section (that depends on the width of the Header), minus the left and right margins.

You can add text, pictures, Flash animation, slideshows, search fields and links to the template's header. The options are shown in the Edit Graphic Template window, which you can open by clicking on the Next button.

Best practices:

- | How to work with the templates
- | Where to find new templates for WebSite X5


Edit Graphic Template

Step 1 - General Settings >

Edit Graphic Template

 Return to chapter overview
Show/Hide hidden text

After you have chosen one of the default templates in the Template selection window, or you have created your own custom template in the Custom Template window, you carry on to the Edit Graphic Template window. You can use the options in the Header and Footer sections of this window to customize your template's header and footer, add text, pictures, Flash animation, Slideshows, HTML code, search fields and links.

The commands and options for the Header and Footer are identical.

If you use Flash animation for the background of the Header or Footer you cannot customize it in the Edit Graphic Template window.
Click to expand/collapse Reference: The template editor

The Edit Graphic Template window contains a graphic editor. Underneath the toolbar, you can see the background image of the header or footer of the template you have chosen (default or custom). The image is shown in a 1:1 scale, and you can scroll it, if necessary. Any changes you make with this editor will be shown in real time in the image.

There is a status bar immediately underneath the image that gives this information:

§Position: the x and y coordinates of the upper right corner of the selected object are displayed.

§Size: this gives the height and width in pixels of the selected object.
Click to expand/collapse Reference: Toolbar options

You can use the options in the toolbar to add new objects to the template's Header / Footer and specify some settings for them. Once an object has been added, you can select it and make changes to it using the options that appear in the box that has the object's name.

Cut [CTRL+X] - Copy [CTRL+C] - Paste [CTRL+V]

To cut, copy or paste the selected object.

Undo [CTRL+Z]

To undo the last action.

Bring to Front - Send to Back

To bring the selected object to the foreground or background (to show it over or underneath any other overlapping object.

Apply a Link

To create a link in the text, image or selected pictures in a slideshow. You can define the link in the Link window.

Position and Size

To open another window and specify the coordinates which give the position and size of the selected object. The Keep ratio option (active by default) maintains the object's original proportions if you should resize it.

Insert Text - Insert Image - Insert Flash Animation - Insert SlideShow - Insert HTML Code - Insert Search Field

To add text, an image, Flash animation, a Slideshow, HTML code or a search field.

A Slideshow is a series of pictures that scroll automatically one after the other. It's a useful object for creating banners (particularly for advertisements).

You can use HTML code for adding content of all kinds, even those for which there is no specific object.

The search field uses a built-in engine so that visitors can search for content within your website.

Any Flash animation or HTML code objects that you add will be visible only when the website is opened with a browser.
Click to expand/collapse Reference: Options for the Header / Footer object

Click on the background image of the Header and Footer sections to select them and use the following commands:

§Save as JPG image: when you are creating your website, the text and image objects that you add to the Header/Footer will be merged with your background image, and it will be automatically saved as a new file in PNG format. This format has been chosen because it means any transparency settings that have been given will be maintained. If you haven't specified any particular transparency settings, you can select the Save as JPG image option to create a smaller background image file.
Click to expand/collapse Reference: Options for the Text object

You can select a Text object in the Header / Footer and use the following options to work on it:

§Content: to enter or paste the text contents in this field.

§Font Type: to define the font, style and size of the text.

§Text Color / Background Color: to define the color of the text and its background.

§Save as PNG image: if this option is active, the text will not be merged with the background image of the Header/Footer, but instead it will be saved as a .PNG image with a transparent background. The original text is automatically associated with the .PNG image as ALT(ernative) text.
Click to expand/collapse Reference: Options for the Image object

You can select an Image object in the Header / Footer and use the following options to work on it:

§Image File: to select the graphic file containing the image to insert. You can insert files in one of these formats: .JPG, .GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF.

§Image File on mouse over: to select another image to use when the mouse passes over the first image. This option is useful when you want to create buttons with a clicked/released effect (mouseover).

§Enable Transparency: to make the image transparent, so that its specific color is not visible.

§Transparency Color: to specify which color in the image is to be transparent if the Enable Transparency option is selected. You might find the "dripper" useful to pick out exactly the color you want directly from the image.

§Tolerance: to specify the tolerance factor to apply to the transparency. The higher you set the tolerance factor, the greater will be the transparent area of the image.
Click to expand/collapse Reference: Options for the Flash Animation object

When you select a Flash Animation object that you have added to the Header / Footer section, you can work on the following options:

§Animation File: select the .SWF file that contains the Flash animation you want to add.

§Transparent Background: this option makes the animation's background transparent.
Click to expand/collapse Reference: Options for the SlideShow object>

When you select a SlideShow object that has been added to the Header / Footer section, the following options are available:

§Image file name: this lists the pictures in the Slideshow, and gives the name of the file that contains each picture. It also indicates any effects and/or links that may have been associated with them. Select a file from the list to see a preview of the Slideshow. Use CTRL + click and SHIFT + click for multiple selections.

§Add... / Remove: Use these options to add/remove pictures to/from a Slideshow. You can make multiple selections from the Images Library.

§Move up / Move down: Use the up and down arrows to change the order in which the pictures appear in the Slideshow. Select a picture and press the up or down arrow to move it up or down in the Image file name list.

§Effect...: this option opens the Effect Properties window, where you can define the various entry, movement and zoom effects for the pictures in the selected Slideshow.

§Autoplay: this option makes the Slideshow start as soon as the website is loaded in the browser.

§Random View: if you select this option, the pictures in the slideshow will appear in a random order, and not necessarily in the order they appear in the Image file name list.
Click to expand/collapse Reference: Options for the HTML Code object

Select an HTML Code added to the Header / Footer section to use the following objects:

§HTML Code: type in or paste the HTML code of the object you want to create. The toolbar proposes the following commands:

Cut [CTRL+X] - Copy [CTRL+C] - Paste [CTRL+V]

These options cut, copy and paste the selected text.

Undo [CTRL+Z] - Redo [ALT+CAPS+BACKSPACE]

These commands undo/restore the last operation to be carried out/undone.

Insert Widgets

This option inserts the code of the selected widget: click on the arrow next to the button to display the complete list of available widgets, as they appear in the HTML and Widgets Object. Click on the widget you want to open the Widget window, where you can set the necessary parameters. When you confirm, the HTML code for the widget is composed and automatically added in the editor.

§Show Scrollbars: this option displays the scroll bars.

Notes on compatibility with the previous versions:

In the previous version 9, this HTML Code editor let you add snippets (a few lines of code) automatically . In the current version 10, the snippets feature has been improved and they have been added to the list of widgets.
Click to expand/collapse Reference: Options for the Search Field object

When you select the Search Field object in the Header / Footer section you can work with the following options:

§Button Label: you can write the text to be shown on the button that starts the search.

§Font Type: select the font, style and size for the of the text of the search button.

§Field Colors: you can decide on the color of the text and the background color of the search string field.

§Button Colors: you can decide on the color of the text and background color of the search button.

§When you add a Search Field to the template's Header / Footer a Special Page is automatically added to the Map with the name "Search": you can select it and open the Page Properties window to specify its properties.

§The results of a search inside the website are shown on pages created automatically by the Program: the appearance of these pages depends on the settings you give in the Styles and Models section of Step 4 - Advanced Settings).

Click to expand/collapse Reference: Options for Effects

When you select a Text, Image or SlideShow object from the Header / Footer you can specify various special effects for that object. The available effects are listed next to Effect Type.

You can select more than one effect for each Text, Image and SlideShow object. You must specify the settings for each effect:

Effect

Settings

Drop Shadow

§Diffusion: indicate how big the shadow is to be.

§Color: define the color of the shadow.

§Offset X / Offset Y: define the shadow's horizontal position with respect to the object. A positive value shifts the shadow down and to the right; a negative value will shift the shadow up and to the left.

Mirror

§Diffusion: indicate how big the object's mirrored reflection is to be.

§Distance: indicate how far from the object the reflection is to be.

Colored Border

§Thickness: define the thickness of the object's border in pixels.

§Color: define the color of the border.

Outer Glow

§Diffusion: specify the concentration of the outer glow.

§Color: define the outer glow's color.

Bevel

§Depth: specify how accentuated the bevel is to be.

§Diffusion: specify the bevel's concentration.

§Angle: define the angle of the bevel.

Rotation

§Angle: specify by many degrees the object is to be rotated (clockwise).

Opacity

§Opacity: set a value from 0 to 255. The object's transparency increases with lower values.

Blur

§Diffusion: specify the concentration of the blur.

Wave

§Diffusion: specify the breadth of the wave.

§Frequency: specify how close the waves are to be to each other.

Perspective

§Horizontal: set the vanishing point for a horizontal perspective to the right (with positive values) or the left (with negative values).

§Vertical: set the vanishing point for a vertical perspective downwards (with positive values) or upwards (with negative values).

Skew

§Horizontal: specify inclination, giving positive values to keep the base of the object still, and negative values to keep the top of the object still.

§Vertical: give positive values to pull the object down from the left side, and negative values to pull it down from the right.

Best practices:

- | How to work with templates
- | Where to find new templates for WebSite X5

Further information:

-

How the search engine works in WebSite X5


Sitemap Creation

Step 2 - Sitemap Creation >

Sitemap Creation

 Return to chapter overview
Show/Hide hidden text

A website is a structured collection of pages. It is important to have a clear strategy when planning this structure so that your website pages will be logically connected with each other and visitors will be able to navigate ypur website easily.

A well-structured site means the visitor will not get lost while looking through it, and will always know where he is: he must be able to find the information he is looking for quickly. A badly-structured site confuses and frustrates the visitor and, in the worst case, leads to him abandoning the site altogether.

The Sitemap Creation window is where you plan your website's structure. You can add all your pages and organize them in varying levels. Once you have defined the structure of the Map with page titles, you can proceed to add the contents of the pages. Click repeatedly on the Next button to open the pages in the same order they have been added to the Map. Alternatively, you can use the Map to open the program's window where you can work directly on a particular page: double-click on the item in the Map or select it and click on the Next.

Click to expand/collapse Reference: The website Map

Most of the space in the Sitemap Creation window is taken up by the website Map tree, which is a schematic representation of the website Map you are creating.

A basic map is shown by default. It has a Menu folder that contains the Home page and 3 other pages. You can use the available commands to add levels, pages and separators to create the website Map you want.

If you use the various sections of Step 4 - Advanced Settings to add a built-in search engine (see Edit Graphic Template), a Welcome Page, a Blog, a Members' Area (you only need one page set as a Locked page) or a Shopping cart, a folder called Special Pages will be added to your Map, and it will include the following items: Search, Welcome Page, Blog, Login and Shopping Cart.

As well as showing the Map's tree structure, other useful information is given for the pages you add, such as the Extended Page Title and the Page Description. This information is taken from the definitions given in the Page Properties window, which you will have previously filled in.
Click to expand/collapse Reference: Commands in the toolbar

The toolbar above the Map offers the following commands:

Cut [CTRL+X] - Copy [CTRL+C] - Paste [CTRL+V]

These commands cut, copy and paste the selected pages in the current project or to different projects. These commands are also available in the popup menu that opens if you click on the right-hand button of the mouse on the Map.

Expand - Collapse

These commands expand and collapse the selected level to show/hide the pages in them.

Hidden Page in the Menu

Select this command if you want the current page or level to be hidden in the Map. If a level is hidden, then all the pages in it will also be hidden. A hidden page can be useful as a means to give further information on a particular topic, and it can be displayed by creating a link to it at the necessary point. Remember to create at least one link to a hidden page, otherwise it will not be accessible.

Locked Page

This command opens the Locked Page window, where you can lock a page by clicking on the Set this Page as Locked option. You must then specify which groups and/or individual users may access the Locked page, clicking on their names in the list that is displayed. Giving access to a group is not the same as giving access to all the users in a group:if new users are added to a group, they will only be able to access locked pages if the group has access.

Click to expand/collapse
Locked Page window

To create new groups/users, go to the Access Management window in Step 4 - Advanced Settings.

§You can hide the home page in the map, but you should only do so if you are going to provide a link to it in other places in the website, for example in the header.

§If you want to create your own navigation menu, you can hide all the pages and levels in the Map: instead of selecting one page at a time, you can select the menu folder and click on the Hidden Page in the Menu button.

See How to create a Members' Area and define access to it for further information on setting up a Members' Area and defining access to it by creating user groups.

Click to expand/collapse Reference: Commands for laying out the website Map

The commands for laying out the website Map are:

§New Level [CTRL+L]: to add a new level to the menu. There are no limits to the number of levels you can add.

§New Page [CTRL+P]: to create a new page, which will be automatically added to the selected level.

§Separator: to include a separator, which will help distinguish the various items in the menu. A separator may be a space or a label, and is particularly useful in multi-column menus (see Drop Down Menu Style | Menu Items in Step 4 - Advanced Settings).

§Remove [DEL]: to delete the selected page, level or separator.

§Rename [F2]: to change the name of the selected home page, page, level or separator. Levels, pages and separators should be correctly named when they are added because the items in the menu are automatically included in the navigation menu, as titles for the individual pages and as names of the HTML files that correspond to each page, unless otherwise specified in the Page Properties window.

§Move up [CTRL+U] / Move down [CTRL+D]: to change to the order of pages, levels and separators, moving the selected item up or down.

You can also change the order to levels, pages and separators directly in the Map: select the item that you want to move, drag it to the required position and drop it into it. You can make multiple selections for levels, pages and separators using the CTRL and SHIFT keys.

§Properties...: to set the properties for the selected page (in the Page Properties window), or the level (in the Level Properties window).

Best practices:

- | How to create and work on the website Map
- | How to create a Members' Area and define access to it

Further information:

-

Navigating a website


The Level Properties window

Step 2 - Sitemap Creation > Sitemap Creation >

The Level Properties window

 Return to chapter overview
Show/Hide hidden text

The Level Properties window opens when you select a level from the website Map. Click on the Properties... button to view the options available for defining the properties of the various levels in the website Map.

In WebSite X5 the Map levels do not contain contents, unlike the pages: they are categories that are used for organizing the pages into logical groups and they provide clear indications for visitors to find their way around the website.

Click to expand/collapse Reference: Level properties

§Hide the Drop Down Menu for this Level: if you select this option, the dropdown menu for this level item is not displayed when the mouse passes over the level name.

§Link to be executed on item click: if you select this option, the Link opens and you can create a link directly to the level item.

It may be useful to "hide the dropdown menu for this level" and define a "link to be executed on item click" when, for example, you want to create a link to an external site as a menu item, or if you want to replace a sub-menu that contains lots of items with a page created specifically to give access to the various sections.

§Icon for the Menu item: you can select an image file (in .JPG, .GIF or .PNG format) that will be displayed as the level's icon in the menu.

Best practices:

-

How to best use page and level properties


The Page Properties window

Step 2 - Sitemap Creation > Sitemap Creation >

The Page Properties window

 Return to chapter overview
Show/Hide hidden text

The Page Properties window opens when you select a page in the website's Map. Click on the Properties... to see all the options available for defining properties which are necessary for optimizing, customizing graphics and adding code to your website pages.

The page property options are organized in 3 sections: General, Graphic and Expert.

Click to expand/collapse Reference: Options in the General section

Use the options in this section to define a series of values that are necessary for correct page optimization:

§Extended Page Title: give the page a name that differs from the one in the website Map.

The name given to the page in the website's Map is kept in the navigation menu; the Extended Page Title given here is displayed as the page's title when the page is displayed online.

If you are working on the Home page, the title is not displayed in the page, even though you can specify an Extended Page Title: the original title is used in the menu, and in the <title> meta tag in the page's HTML code, but if you specify an Extended Page Title this will be used in the <title> meta tag.

§Page Description: you can enter a description for the page. It must be concise and to the point: it is used as the value for the <description> meta tag in the page's HTML code and used by search engines to index your website.

§Website Keywords: you can enter specific keywords for this page (they must be separated by a comma). The keywords are used as the values for the <keywords> meta tag in the page's HTML code and used by search engines to index your website.

§File Name: you can specify the name of this page's HTML file.

Unless otherwise specified, the default name of the HTML file is the name given to the page in the website's Map. Use short and meaningful names so that the address is simple and easy to remember. It will also help improve search engine indexing. This option is not available for the Home page.
Click to expand/collapse Reference: Options in the Graphic section

The options in this section are used for defining some important graphic aspects of the page you are working on.

First of all, you can give the page a different background to the other pages in the website, that is defined in the selected template (see Template selection). Remember that the page background is the area around the page when the browser window is opened with a higher resolution than that of your website.

The options for the WebSite Background for this Page only are:

§Background Color: indicates the color to use for the background.

§Image File: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background.

§Repeat: indicates whether the page background image is to be repeated, or not. It can be repeated horizontally, vertically or in both directions so that it occupies all the available space. The background image can also be resized so that it adapts to the available space.

§Alignment: you can indicate how the page's background image is to be aligned.

§Fixed Background: if you select this option, the page's background image is fixed, even when the page contents are scrolled.

The background of the selected page's contents can also differ from that of the other pages in the website, and defined in the template (see Template selection). In this case, you have to use the options in Page Content for this Page only, which are identical to the options for the page's background.

Finally, you can define some general Options:

§Icon for the Menu item: select the image file (in .JPG, .GIF or .PNG format) for the icon that appears in the navigation menu, next to the page's title.

§Create the Page without the Template: if you select this option, the parameters of the template (default or custom - see Template selection) will not be applied to this page: it will be a page with contents but no graphics and no navigation menu.

§Page Width: this option is only available if you have selected the Create the Page without the Template option: it specifies the width of the page in pixels.
Click to expand/collapse Reference: Options in the Expert section

Use the options in this section to manually edit the HTML code for the page you are working on.

§File Name Format: indicate the format in which the page's file is to be saved. The default extension is .HTML, but you can choose from .PHP, .ASP, .CFM and .JSP. The Home page's index.html file can also be saved in a different format. You cannot change the format of locked files (see [image] Locked Page in the website Map toolbar): it must remain .PHP.

§Custom Code: indicate where custom code is to be added in the page's HTML code: Before closing the HTML tag, Before closing the HEAD tag, BODY tag property (ie: style, onload, etc.) (that is, as part of the <BODY> tag, for example <BODY onload="alert('Hello!')">), Before closing the BODY tag, After closing the BODY tag. When you have decided where to add your custom code, type in or paste the section of code in the field.

The Custom Code option is useful when, for example, you want to link particular style sheets (CSS) to the page, or when specific events are to take place when the page is uploaded. For some JavaScripts to work properly, you need to add the custom code lines in both the <HEAD> and <BODY> sections of the page's HTML file. JavaScripts can be added using the HTML and Widgets Object.

Finally, the SiteMap Settings section includes options for working on the website's SiteMap:

§Add this page to the Sitemap: this is selected by default, and adds the page to the website's SiteMap.

§Contents Priority: this gives a priority level to the page, indicating its importance in the website, with respect to other pages. This parameter is included in the SiteMap.

§Update frequency: specifies how often the page is to be updated. This parameter is included in the SiteMap.

Notes on compatibility with the previous versions:

Unlike the previous versions, in version 10 it is now possible to open the Page Properties window from the Special pages that appear automatically in the website's Map when the built-in search engine is used in the website (see Edit Graphic Template), and when a Welcome Page, a Blog, a Members' Area or a Shopping cart is added.

Best practices:

-

How to best use page and level properties

-

How to include adverts in your website

Further information:

- | HTML, HTML5 and CSS
- | The Web Browser and WebSite X5's browser
- | Search engines and SEO optimization


Page Creation

Step 3 - Page Creation >

Page Creation

 Return to chapter overview
Show/Hide hidden text

Once you have defined your project's Map, you can start creating the various pages that will make up your website. The Page Creation window is where you can create your pages and add their content.

The pathname and page title of the page you are working on are indicated as the Current page.

Click to expand/collapse Reference: The page layout table

WebSite X5 uses a table to make page layout easy. The default table is 2 rows by 2 columns (giving a total of 4 cells): to create your page (add content to it), all you have to do is drag an object from the list of those available and drop it into a cell. Each cell can only contain one object.

If you want, you can add more rows and columns to the default table, so increasing the number of cells available for content. You can also change the width of each column. As we will see, being able to modify the page layout table and insert objects so that they cover more than one cell gives you plenty of scope for complex and professional page layouts.

Note: the page layout table is not visible when your website is published on the Internet. the sole purpose of the table is to help you lay out your page contents to obtain the best effect. The page layout table is not translated as a table in the page's HTML code (apart from very few, specific cases of complex page layout combinations).

As mentioned above, a cell in the page layout table can contain only one object, but an object may cover adjacent cells both horizontally and vertically, and it may even take up more space than the physical size of the page.

The way in which cells are displayed in the page layout table changes according to their status:

§If the cell contains an object that has not yet been populated, the object's icon is displayed in the cell with a background of gray diagonal lines;

§If the cell contains an object that has been populated, the object's icon is displayed in the cell with a blue background;

§If the cell contains the selected object, the border and selection handles are displayed.

Click to expand/collapse Reference: The toolbar commands

The toolbar is immediately above the page layout table, and it contains the following commands:

Edit

This command opens a window where you can create the object that has been selected in the page layout table. The window that is opened depends in the type of object selected (text, image, flash animation, etc.).

Cell Style

This command opens the Cell Style window where you can define the appearance of the current cell.

Set an Anchor

This command creates an anchor and associates it with the object selected in the page layout table. If you click on the arrow next to the button, you will see a menu with these options: Insert Anchor..., Edit... and Remove.

Add a Row/Add a Column

You can add a new row or column to the page payout table. Click on the arrow next to the buttons to indicate whether the row/column should be added before or after the selected cell. The maximum size for page layout tables is 64 rows x 12 columns.

Remove Row / Remove Column

These commands remove the selected row/column from the page layout table. The minimum size for page layout tables is 1 row x 1 column (one cell).

An anchor is a reference that helps identify the position of an object within a page: it is used to set up links directly to the object.

Notes on compatibility with the previous versions:

In the previous versions, the options for cell margins and cell content alignment were found in menus shown by the [image] and [image] buttons in the toolbar above the page layout table. In version 10, these buttons have been removed, and the options are now in the Cell Style| Style window.
Click to expand/collapse Reference: The list of objects available

The list of objects available is next to the page layout table. To insert an object in a page, select its icon from the list and drag&drop it into the appropriate cell of the page layout table.

The available objects are:

Text Object | Image Object | Table Object | Gallery Object
Video/Audio Object | E-mail Form Object | Social Network Object | Guestbook Object
Map Object | Flash Animation Object | Products List Object | HTML and Widgets Object

Once you have inserted an object in the page layout table, click on the [image] button (or double-click the object) to open the window for actually creating it.

Notes on compatibility with the previous versions:

Objects available - The Guestbook Object, Social Network Object and Map Object are new to version 10 of WebSite X5: in the previous version 9 they were available as widgets of the HTML and Widgets Object.

Best practices:

- | How to create a page using the page layout table
- | How to create and use anchors


Text Object

Step 3 - Page Creation >

Text Object

 Return to chapter overview
Show/Hide hidden text

Text is a very important element of the contents on an Internet website. As well as images, videos and Flash animations, a lot of site contents are made up pure text.

Writing for the Internet isn't the same as writing for something that is going to be printed: the Internet has different characteristics, such as the support used for displaying text (the screen of a computer or mobile device), how the text is read (on a computer this is more of a quick scan than the concentrated reading of a book) and a potentially unlimited number of alternatives (think of how many sites deal with the same subject).

To attract the attention of visitors, entice them to read your website and persuade them that you have something more to offer, the text you write must be suited to online publication. What you write must be interesting and to the point. Divide the text into short sentences and paragraphs so that it is easier to read and less heavy to look at. Pay particular attention to the formatting you adopt: use bold, italics, titles and subtitles, etc. with care and coherency.

Visitors are more attracted to websites that have been carefully thought out: nothing is more likely to deter a visitor from returning to a website, or continuing its navigation, than text full of spelling mistakes, an unattractive layout, complicated reading, and so on.

After these brief, but important, considerations on Web Writing, WebSite X5 helps you write your texts using a built-in editor, and provides you with all the formatting commands you will need. Texts that have been created with other programs can be added with simple copy and paste operations. What's more, WebSite X5 lets you create a text to be displayed in tabs: a practical and useful way of organizing information in small spaces such as web pages.

Click to expand/collapse Reference: The text editor commands

The toolbar of the text editor contains these commands and options:

Cut [CTRL+X] - Copy [CTRL+C] - Paste [CTRL+V]

These commands cut, copy and paste the selected text. Pasted text will lose any formatting options (bold, italics, etc.) applied in the original document, and it will take on the equivalent options in this editor.

Paste Special

Use this command if you want to paste text that has been cut or copied with the Cut and Copy commands, and you want to maintain the original formatting.

You can use the Cut, Copy and Paste commands to cut, copy and paste text extracts that have been created with other editors.

Undo [CTRL+Z] - Redo [ALT+CAPS+BACKSPACE]

These commands undo/restore the last operation to be carried out/undone.

Insert Link [CTRL+L]

This command sets up a link on the selected word(s). You can define the link in the Link window that opens.

Insert Image

You can add an image to the text (in .JPG, .GIF, .PNG, or .BMP format). Images added to a text are automatically resized if they are bigger than the cell in the page layout table. You can also change the image's size manually by pulling on the selection handles. For specific page layout considerations, you may prefer to work on an image object in the Image Object window.

Enable HTML Code

With this command, you can enter HTML code directly in the text page. When working in HTML mode, the < and > characters are not interpreted as "less than" and "greater than", but instead anything that is between them is interpreted as an HTML tag.

Rollover Settings

You can apply a rollover effect to the text, so that it can be scrolled. The settings for the rollover are defined in the RollOver window.

Fit Content to Cell Width

With this option, the editor will simulate the appearance of the text in relation to the size of the cell in the page layout table that houses it.

Light/dark background

This option sets a dark or light color for the editor's background: this can be useful if you are working on text that is written in white, or another pale colour.

Font type - Font size

You can choose the type of character (font) to use for your text, and its size.

The drop down menu lists all the fonts that are available on your computer. Remember that if you choose a font that is not available on a visitor's computer, it will be automatically replaced by a font that is similar to the original setting.

Bold [CTRL+B] - Italic [CTRL+I] - Underlined [CTRL+U]

These options apply bold, italics and underlining to the selected text.

Text Color - Background Text Color

You can choose a color for the selected text, or for its background.

Bullet List

You can add a bullet list.

Indent / Unindent

You can increase or decrease the selected paragraph's indent.

Align Left - Align Center - Align Right - Justify

You can align the selected text to the left, right, center, or you can justify it.

Text on the Right - Default - Text on the Left

These options are active when an image is inserted in the text and selected. They are used to define how the text is displayed around the image: it can be all to the left, all to the right, or around the image.

Click on the righthand mouse button to display a popup menu with these commands: Undo, Cut, Copy, Paste, Paste Special and Select All.

Best practices:

-

How to work with the Text Object


The RollOver window

Step 3 - Page Creation > Text Object >

The RollOver window

 Return to chapter overview
Show/Hide hidden text

This window opens when you press the [image] button in the Text Object or Table Object editor, and contains the commands and options for setting rollover effects on text.

Click to expand/collapse Reference: Rollover settings

First of all you need to select the Enable Rollover, and then you can define the rollover in the Type section:

§Movement: You can choose the rollover style. It may be:

None - Show Scrollbar: the text doesn't scroll but, if the specified cell height (see the Height option), is not sufficient to display all the text, a scroll bar will be added automatically.

Single Slide: the text scrolls in the given direction and stops at the end of the text.

Continuous Scroll: the text scrolls in the given direction and, when the end of the text is reached, it starts scrolling again from the beginning.

Alternated Scroll: the text scrolls in the given direction and, when the end of the text is reached, it starts scrolling in the opposite direction.

Scroll in Sections: the text is (virtually) divided into sections of the size specified in the Height option. Scrolling starts from the first section, followed by a pause, and then the second section is scrolled. This continues until the last section has been scrolled, and then the first section reappears. This effect works best when the text is written and formatted in a uniform manner so that it can be divided into equal sections, giving an appropriate value for the Height option.

§Direction: You can specify the direction for the rollover: to the Top, Bottom, Left or Right.

The Options section contains the following options:

§Effect: You can choose between Linear, Alternate and Swing for all the rollover styles, except Continuous Scroll.

§Height: You can set the height of the cell that contains the text.

§Length (secs): You can specify how many seconds the effect lasts for. If you set the rollover style as Single Slide, Continuous Scroll or Alternated Scroll, the length is the time it takes to complete the effect, before starting from the beginning. If you have selected Scroll in Sections, the length is the time it takes to display a section before passing on to the next.

§Stop on Mouse Over: Scrolling will stop when the mouse passes over the text.

The Height option is only available if you have set a vertical rollover (to the top or bottom). If you have set a horizontal rollover (to the left or right), the effect is better if the text object occupies an entire row in the page layout table.

Best practices:

-

How to work with text objects


Image Object

Step 3 - Page Creation >

Image Object

 Return to chapter overview
Show/Hide hidden text

Images and pictures are among the most frequently-used elements in a web page. They help to put across an idea, to advertize a product, to give a certain message, or simply to make a page look more attractive. Whatever the reason, images are important because they help create the overall impression of a website and increase the perception that it is attractive, well thought-out and professional.

WebSite X5 lets you import images in all the main graphic formats, and you can use the Image Editor to put the final touches to your pictures: cutting, rotating, correcting, adding masks, filters and frames. You can also work on the pictures to give them fantastic wide-angle and close-up views.

WebSite X5 is very aware of the problem of unauthorized copies of pictures from the Internet. A built-in protection system prevents website visitors from tracing the original file, and you can also apply watermarks and copyrights.

The commands for creating an image object are organized in sections: General, Display and Sitemap.

Click to expand/collapse Reference: Commands in the General section

Use the commands in this section to import graphic files and edit images.

WebSite X5 handles all the main graphic formats (.JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF): select the image you want to import from those on your computer, or directly from the Internet.

A preview of the imported picture is shown in the Preview box. Click on the Edit... button under the preview to open the built-in Image Editor where you can edit the image.

Images can have a number of Properties:

§Title: this is the title of the image; it will be added to the title attribute of the <img> tag in the page HTML code.

§Alternative Text: this is the text that is shown when the image cannot be displayed for some reason. In the page's HTML code the alternative text will be added to the alt attribute of the <img> tag.

The Title and Alternative Text parameters must be considered carefully, because they are important for website accessibility and optimization.

§Link: you can add a link to the picture. Click on the [image] button to open the Link window, where you can define the link and options.

Click to expand/collapse Reference: Commands in the Display section

Use the commands in this section to define how the imported image is to be displayed: with WebSite X5 you can obtain wide-angle pictures and add close-up and movement effects.

The Display Mode are:

Automatically resize Image: this option is active by default. The size of the image is automatically adapted to the size of the cell in the page layout table where you insert it.

Manually enlarge and move the Image: with this option, you can enlarge the image by clicking on it until it reaches the size set by the zoom factor. You can move the enlarged image to bring a particular part of it into the foreground: click on the image and drag it to where you want it.

To obtain this effect, the image is first shrunk to the size of the cell in the page layout table and then re-calculated either according to the Max Zoom factor (if you choose Free Movement in Movement Mode) or in proportion to the Height (if you select Horizontal Panoramic View or Vertical Panoramic View for Movement Mode). The resulting image will be bigger than the display area, and can be moved around in it.

Automatically enlarge and move the Image: this option is very similar to the previous one, except that you can move the image by moving the mouse near its edges.

If you select Automatically resize Image as Display Mode, you can select these Settings:

§Quality: this is the level of quality to be maintained when the picture is saved in .JPG format. All imported images are automatically converted to .JPG format, or .PNG if transparency has been set. When a file is saved in .JPG format, the more it is compressed the poorer will be the quality.

It is best to use graphic files in .JPG, .GIF and .PNG formats. If you add an image that is not in .JPG, .GIF or .PNG format, it will be automatically converted to .JPG format, according to the specified level of compression. Files are converted to .JPG (or .PNG if they have transparency applied) even if the image is larger than the cell in the page layout table and if it is edited with the Image Editor.

In all other cases, the image is copied as it is, in order to maintain transparency applied to .GIF files.

§Resample Method: this option indicates how the image's size is to be reduced (width and height). You can choose from:

-Bilinear (faster): this is the quickest resample method, but renders a poorer image quality than the other methods.

-Decimate: this method is fairly fast and renders a good-quality image.

-Bicubic (better but slower): this is the slowest method, but it renders a high-quality image.

If you select Manually enlarge and move the Image or Automatically enlarge and move the Image for Display Mode you can work on the following Settings:

§Movement Mode: you can indicate the direction in which the image can be moved, manually or automatically. It can be:

-Free Movement: the image can be dragged horizontally or vertically. Specify the Max Zoom: for example, a zoom factor of 200% will display the image at twice its original size.

Original picture | Picture with effect applied

-Horizontal Panoramic View: the image can only be dragged horizontally. This effect works well on pictures whose width is greater than the height. Specify the picture's height in pixels in the Height field.

Original picture | Picture with effect applied

-Vertical Panoramic View: the image can only be dragged vertically. This effect works well on pictures whose height is greater than the width. The value in the Height field is the height, in pixels, that you want to maintain for the cell in the page layout table.

Original picture | Picture with effect applied

§Max Zoom: this option is only available for the Free Movement option. You can set the zoom factor for the image so that it is bigger than the available viewing area. If the image were not enlarged, you wouldn't be able to drag it.

§Height: this option is only available for the Horizontal Panoramic View and Vertical Panoramic View options. In the first case you can set the image's height in pixels, and in the second case you can set the height of the cell in the page layout table in which the image is displayed.

§Enable Image Enlargement: this option is active by default. The image can be enlarged or reduced by the mouse wheel. When the page is opened, the image is shown at its original size and the icon in the bottom right corner indicates that zooming is possible. The image will be enlarged/reduced when you turn the mouse wheel, until it reaches the size set in Max Zoom.

§Show the Zoom Bar: this option is only available if Enable Image Enlargement is active. The image can be enlarged/reduced by sliding the zoom bar cursor left or right.

§Show the navigator: this option will display a small window inside the image with a thumbnail of the image itself. The navigator is used to highlight a particular part of the image. Visitors can drag the navigator around the image to highlight different parts. The navigator disappears when the cursor is moved away from the image.

§Enable automatic continuous movement: if you select this option, the image will continue to move as long as it is displayed. This can be useful to indicate to visitors that the image can be enlarged. Automatic continuous movement is interrupted when the visitor moves the mouse wheel or the cursor in the zoom bar.

If you have set Automatically resize Image as Display Mode for the image you are working on, you can set Mouse Over Effects:

§Mouse Over Effects: you can specify a special effect for when the mouse moves over the image (mouseover).

§Settings: these vary according to the type of Mouse Over Effects selected: they give the parameters that define the effect (for example, the color and thickness for of the borders for the "Colored border" effect).

You can also use the Protection options to try and prevent unauthorized copying of your pictures:

§Protect Image against copy: protects the image, preventing it from being copied by commands such as Save as that menus in the various browsers propose.
Click to expand/collapse Reference: Commands in the Sitemap section

You can use the commands in this section to give further information on your image, that is used in the website's SiteMap.

First of all, select the Add Image to Sitemap option: information you add on the image will be added to the SiteMap that WebSite X5 creates automatically (see Automatically create a SiteMap in General Settings | Expert). The following settings can then be defined:

§Title: (optional parameter) you can give the image a title.

§Caption: (optional parameter) you can give the image a caption or a brief description.

§Geographical position (e.g. Address, Town, etc): (optional parameter) you can give general information, such as an address, town or country which help locate the image geographically.

§Licence URL: (optional parameter) you can give the URL of the file that contains the image's user license.

Information on images that are protected against unauthorized copying cannot be included in the SiteMap (see Protect Image against copy in the previous section, Display).

Best practices:

- | How to work withImage Object
- | How to create and link the website's SiteMap

Further information:

-

Search engines and SEO optimization


Table Object

Step 3 - Page Creation >

Table Object

 Return to chapter overview
Show/Hide hidden text

Tables are very useful for organizing and presenting data.

Tables can often present information more clearly than a long and wordy text. If you use a table to present a hotel price list, for example, giving the cost of the different types of rooms in different periods of the year, it will be much clearer and easier to read than pages full of text giving the same information.

Tables can also contain graphics, that help make the page look more attractive and break the monotony of a long text.

If you use a table to present information, make sure it is not too complicated, that the information is presented clearly and logically, and that the table is easy to read and attractive.

WebSite X5 provides an editor for creating tables that is very similar to the editor used for Text Object. By default, the editor shows a 2 rows x 3 columns table, that covers the whole width of the cell in the page layout table where it is inserted. You can add more rows and columns, change their size and merge or split cells as necessary.

Click to expand/collapse Reference: Commands for the Table editor

The editor's toolbar contains the following commands:

Cut [CTRL+X] - Copy [CTRL+C] - Paste [CTRL+V]

These commands cut, copy and paste the selected text. Pasted text will lose any formatting options (bold, italics, etc.) applied in the original document, and it will take on the equivalent options in this editor.

Paste Special

Use this command if you want to paste text that has been cut or copied with the Cut and Copy commands, and you want to maintain the original formatting.

Undo [CTRL+Z] - Redo [ALT+CAPS+BACKSPACE]

These commands undo/restore the last operation to be carried out/undone.

Insert Link [CTRL+L]

This command sets up a link on the selected word(s). You can define the link in the Link window that opens.

Insert Image

This inserts an image (in .JPG, .GIF, .PNG or .BMP format) in the table cell. You can use the selection handles on the images to resize them.

Enable HTML Code

You can add HTML code directly in the table. In HTML mode, the < and > characters are not interpreted as "less than" and "greater than" but instead, the text between them is interpreted as an HTML tag.

Rollover Settings

You can apply a rollover effect to the text, so that it can be scrolled. The settings for the rollover are defined in the RollOver window.

Light/dark background

This option sets a dark or light color for the editor's background: this can be useful if you are working on text that is written in white, or another pale colour.

Add Row / Delete Row / Add Column / Delete Column

These options add a row or column after the one where the cursor is position, or they delete the row or column on which the cursor is positioned.

Merge Cells - Split Cells

These options merge the selected adjacent cells to form a single cell, or they split the selected cell vertically to create two cells horizontally adjacent.

Font type - Font size

You can choose the type of character (font) to use for your text, and its size.

The drop down menu lists all the fonts that are available on your computer. Remember that if you choose a font that is not available on a visitor's computer, it will be automatically replaced by a font that is similar to the original setting.

Bold [CTRL+B] - Italic [CTRL+I] - Underlined [CTRL+U]

These options apply bold, italics and underlining to the selected text.

Text Color - Cell Background Color

These options set the color to be used for the selected text, or for the background of the cell containing the selected text.

Cell Border Style

This option sets the style for the cell borders. You can define the color and thickness of the borders separating rows and columns in the table.

Bullet List

You can add a bullet list.

Align Left - Align Center - Align Right - Justify

You can align the selected text to the left, right, center, or you can justify it.

Text on the right - Normal - Text on the left

These options are available when an image is inserted in a cell with text. They are used to indicate whether the text is on the left or right of the image, or wraps round it.

Align Top - Align Center - Align Bottom

These options vertically align the selected text to the top, center or bottom of the cell.

Click on the righthand mouse button to open a popup menu that includes the Undo, Cut, Copy, Paste, Paste Special and Select All commands and:

§Row Height

You can set the value in pixels of the height of the selected rows. If this value is set to 0, the rows will be automatically set to the minimum height necessary to display the contents.

§Column Width

You can set the value in pixels of the width of the selected columns.

The size of the rows, columns and single cells can be changed by dragging the cell borders with the mouse, holding down the left button. If you select a cell and move the left and/or right border, only that cell's size is changed.


Gallery Object

Step 3 - Page Creation >

Gallery Object

 Return to chapter overview
Show/Hide hidden text

Digital cameras and online services make it extremely simple for anyone to publish and share entire photo collections on the Internet. You can publish your family photo album and share it with relatives and friends, wherever they are in the world. Or you can create albums and catalogs for your hobbies or work.

With WebSite X5 you can create incredible galleries to show not only your photos but also videos. Each gallery has different effects, navigation methods and displays: they may, for example, have a control bar or thumbnails, and how these are displayed may differ. All the galleries use JavaScript and exploit HTML5 and CSS3 for creating display effects.

Notes on compatibility with the previous versions:

HTML5 Galleries v Flash Galleries - HTML5 galleries were first introduced in version 9.1 of WebSite X5 and in version 10 they completely replace the previous Flash galleries.

Flash galleries have been replaced by HTML5 galleries because, although they provide many display effects, the Flash player is required to display them and they are not supported in tablets and mobile devices with the iOS operating system (for example, iPad® e iPhone®). HTML5 galleries, on the other hand, load more quickly, they do not require any plug-ins and are correctly displayed on all types of device and modern operating systems.

If you are using a browser version that does not support HTML5 and CSS3, the HTML5 galleries will be displayed correctly but some of the display effects applied to images may not be handled. In such cases, the Fade effect is applied automatically.

If a gallery includes a video whose format is not supported by HTML5, or the browser does not support this video in HTML5, it will automatically be displayed in Flash to ensure correct playing.

Some of the available galleries offer thumbnails and a ShowBox window where the enlarged images of the thumbnails are displayed. The visitor only has to click on a thumbnail to open the picture or video in the ShowBox, which is superimposed over the page. Moving the mouse into the ShowBox window brings up the buttons for displaying the next/previous picture or video in the gallery, without having to return to the thumbnails.

You can customize the look of the ShowBox window with the options in the Styles and Models | ShowBox section of Step 4 - Advanced Settings.

The commands for creating a Gallery Object are in the Style, List and Thumbnails sections.

Click to expand/collapse Reference: Commands in the Style section

You can use the commands in this section to choose the kind of gallery you want to create, and specify some general settings for it.

The selection of galleries includes:

Click to expand/collapse | Classic Slideshow In a gallery of this type, the pictures and videos are shown sequentially, one after the other: the way in which pictures are displayed depends on the entry effect that has been set. The commands for passing from one picture to another are in the control bar. You can also have the thumbnails shown in the control bar, and these let visitors open a particular picture or video immediately, without going in sequence.
Click to expand/collapse | Horizontal Gallery In this type of gallery the thumbnails are displayed in the foreground above or below the picture. The thumbnails scroll left/right when the mouse is placed over them: clicking on a thumbnail opens the enlarged picture or video in the foreground. The enlarged pictures will appear with the entry effect that has been set for them.
Click to expand/collapse | Vertical Gallery This gallery type is the same as the previous one, except that the thumbnails are displayed vertically, on the left or right of the picture in the foreground.
Click to expand/collapse | Thumbnails This gallery also shows thumbnails, and when one is clicked the corresponding picture or video is opened in the foreground in the ShowBox.
Click to expand/collapse | Thumbnails per frame This gallery type is very similar to the previous one, with the only difference that you can divide the pictures into frames and specify how many rows of thumbnails to display. The visitor scrolls through the frames, using the button bar, and remains on the same website page. This gallery type is useful if you have a lot of pictures to include in your gallery.
Click to expand/collapse | Horizontal Thumbnails In this gallery type, the thumbnails are displayed in a single horizontal row. The picture or video selected from the thumbnails is displayed in the ShowBox.
Click to expand/collapse | Vertical Thumbnails This option is the same as the previous one, except that the thumbnails are displayed vertically.

The various gallery types have differing Settings and options for their Navigation Commands.

Settings: | Classic Slideshow | Horizontal Gallery | Vertical Gallery
§Maximum size: defines the maximum width and height, in pixels, of the pictures. Leave the Keep Ratio selected to keep the ratio between width and height. | P | P | P
§Visible Thumbnails: sets the number of thumbnails to display next to the main picture. | - | P | P
§Thumbnails position: defines where the thumbnails are displayed with respect to the main picture. | - | P | P
§Description Font:specifies the font, style and size to use for the text. These settings are used for the captions you can create in the Description field in the List section. | P | P | P
§Soundtrack: specifies the audio file to be used for the soundtrack that plays when the gallery is displayed. | P | P | P
§Autoplay: the picture and video Slideshow starts as soon as the gallery opens. | P | P | P
§Random View: the pictures and videos are shown in a random order, and not in the sequence they are added. | P | P | P
Navigation Commands:
§Buttons View: defines whether and how the navigation buttons are to be shown next to the main picture in the gallery, to pass to the next/previous picture. The buttons can be Always visible, Not visible (autoplay) or Visible on mouse over. | P | - | -
§Buttons Style: you can choose the style of the buttons that are shown next to the gallery's main picture. | P | - | -
§Show Control Bar: this is active by default: a control bar appears on mouseover showing the controls to use for looking through the pictures and videos in the gallery. The basic controls are [image] Start Slideshow, [image] Previous picture and [image] Next picture. | P | P | P
§Color: specifies the background color of the control bar. | P | P | P
§Show Thumbnails in the Control Bar: this is active by default: it adds a list of thumbnails of the pictures in the gallery to the control bar, that is displayed on mouseover. The visitor doesn't have to follow the sequence of the Slideshow, but can pick out the pictures or videos that he wants to see. | P | - | -

Settings: | Thumbnails | Thumbnails per frame | Horizontal Thumbnails | Vertical Thumbnails
§Visible Thumbnails: sets the number of thumbnails that are to be displayed. | P | - | P | P
§Rows per frame: defines the number of rows in which the thumbnails are organized. | - | P | - | -
§Display enlarged image on click in ShowBox: creates the link on the thumbnails so that the corresponding picture or video is displayed in the ShowBox. | P | P | P | P
§Maximum size: this is only available if the Display enlarged image on click in ShowBox option is active: it defines the maximum width and height, in pixels, of the ShowBox window. Leave the Keep Ratio selected to keep the ratio between width and height. | P | P | P | P
Click to expand/collapse Reference: Commands in the List section

You can use these commands to define the list of pictures and videos that are to be added to the gallery.

All the files that have already been imported are shown in the Image filename list: select a file from the list to see a preview of it.

The Image filename list shows the file's pathname, the associated entry effect and ticks if the file has a link and a description.

The commands for creating the gallery object are:

§Add... / Remove: add new files or remove the selected ones that have already been added. You can import graphic files in .JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA and .WMF format. You can import video files in .FLV and.MP4 formats.

Click on the triangle of the Add... button to display a submenu that has these options: Add Image..., Add Video... and Add YouTube/Vimeo Video....

Click to expand/collapse

In the window shown by the Add YouTube/Vimeo Video... command, you can specify the URL address of videos that you want to add from portals such as YouTube™ and Vimeo.

§Move up / Move down: you can change the position of files in the Image filename list.

§Edit...: this opens the built-in Image Editor where you can modify the picture selected from the Image filename list.

Depending on the type of gallery you have selected, you can define Options for each picture/video that has been inserted.

§Link: creates a link on the picture/video selected from those in the list. Click on the [image] button to open the Link window where you can select the action and relative options. If your chosen gallery uses thumbnails, the link you create replaces the one with the enlarged picture, even if the Display enlarged image on click in ShowBox option is active.

§Effect: when you click on the [image] button the Effect Properties window opens where you can define the entry, movement and zoom effect for the picture/video selected from the Image filename list.

If you are using a browser version that does not support HTML5 and CSS3, the HTML5 galleries will be displayed correctly but some of the display effects applied to images may not be handled. In such cases, the Fade effect is applied automatically.

§Description: you can enter a description of the picture video selected from the Image filename list in this field. The text of the description is shown at the bottom of the window where the enlarged picture or video is shown.
Click to expand/collapse Reference: The commands in the Thumbnails section

You can use the commands in this section to define the look of the thumbnails in galleries that have them.

A thumbnail is a miniature version of a picture or video in a gallery, and it is created automatically by the program. Thumbnails are shown in frames that can make them look like slides, negatives, post-its, etc.

These commands are for defining the thumbnail's appearance:

§Preset Image: you can choose the frame for the thumbnail from a selection.

§Custom Image: you can load the graphic file (in .JPG, .GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA or .WPG format) that corresponds to the frame you want to use.

To create a new frame, prepare the image and save it in a file. You should create square frames and save them in .PNG form, if you want to maintain an outer transparency.

The following Options are also available for the thumbnails:

§Outer Image Margin (%): you can specify the margin between the thumbnail and the frame.

§Enable Color Saturation: you can specify the color saturation of the thumbnail frame. A coloring effect is applied to the frame's image so that it tends towards the required color.

Color saturation has no effect on black or white frames.

Galleries can be started by links in the pages: see Link for more information.


Video/Audio Object

Step 3 - Page Creation >

Video/Audio Object

 Return to chapter overview
Show/Hide hidden text

With WebSite X5 you can entertain visitors to your website by adding videos and music.

Videos are living a moment of glory: everyone can make a video, copy it to a computer, edit it and then publish it on the Internet.

With WebSite X5 it is very easy to import all types of video, add them to your website and share them. WebSite X5 accepts all the main formats and has a built-in player for .FLV and .MP4 files. You can import files already on your computer or files you find on the Internet, including those on portals such as YouTube™ and Vimeo.

The commands for creating a Video/Audio Object are organized in the General and Sitemap sections.

Click to expand/collapse Reference: Commands in the General section

Using the commands in this section, you can import the file to use for creating a Video/Audio Object and give the necessary indications on how it is to be played.

The 'Video/Audio Object can be added in several ways, depending on where the imported file comes from:

§Local File on PC: if you select this option, just click on the [image] button to browser through the files that are on your computer and choose one to import. The file must be in .MP4, .WEBM, .OGG, .FLV, .AVI, .WMV, .MPG, .MOV, .MP3, .WMA, .WAV, .MID, .AIF or .M4A format.

§Internet file: if you select this option, enter the URL address where the video or audio file is located on the Internet.

§YouTube/Vimeo Video URL: If you select this option, enter the URL address where the video/audio file you want to import can be found in the page of a portal such as YouTube™ or Vimeo.

If you iimport a video from YouTube™, it will be resized according to WebSite X5's settings. If you want to maintain the original size you can import the file from YouTube™ using the HTML and Widgets Object instead of the Video/Audio Object.

You can display a preview of the imported video/audio object, by selecting the Preview option.

Different players are used for playing the various video/audio file formats. If the browser supports the HTML5 video tag and the file's codec, then it will use WebSite X5 Media Player to display/play files in .MP4, .WEBM and .OGG formats. All other formats are handled as shown in the table:

Player | Video File | Audio File
Adobe Flash Player® | .MP4 and .FLV | .MP3
Microsoft® Windows Media Player® | .AVI, .WMV and .MPG | .WAV and .WMA
QuickTime® Player | .MOV | .M4A and .AIF

To ensure maximum compatibility, you should use .MP4.

Whichever player is used displaying/playing the imported file, you can define the following Properties:

§Alternative Text: enter the text that is to be displayed if the video/audio cannot be played for some reason.

§Size: enter the width and height in pixels of the video or audio control bar. The maximum width for the object is shown in brackets, according to the settings for the page layout table. The maximum height for the audio control bar (35 pixels) is shown in brackets. The minimum height is 15 pixels. Leave the Keep Ratio selected to keep the ratio between width and height.

§Autoplay: if set, the video/audio will start automatically.

§Enable Full Screen view: the full screen button will appear in the video control bar.

You can define how the Control Bar is displayed:

§Show Control Bar: displays a button bar with all the video/audio controls.

If WebSite X5 Media Player is used to display/play the file, you can also choose the following options for the Control Bar:

§Automatically hide the Control Bar: the control bar appears on mouseover in the window where the video/audio is playing.

§Color: sets the background color of the control bar.

WebSite X5 Media Player is not used for videos in Microsoft® or QuickTime® format, and this could cause occasional problems with the control bar.
Click to expand/collapse Reference: Commands in the Sitemap section

Use the commands in this section to give further information which may be useful for completing the website's SiteMap.

First of all, select the Add video to the Sitemap option: the information in the video is added to the SiteMap that is created automatically by WebSite X5 (see Automatically create a SiteMap in General Settings | Expert). Then you must set the following parameters:

§Title: (mandatory parameter) this specifies the title to give to the video. Google™ accepts 100 characters for the title's length

§Caption: (mandatory parameter) this specifies a brief description of the the video. Google™ accepts 2048 characters for the description: longer ones will be cut.

§Category: (optional parameter) this specifies a category for the video, according to its content. Google™ stipulates that a video may belong to only one category, and the category name must not exceed 256 characters.

§Website Keywords: (optional parameter) this specifies a list of tags, or brief descriptions of the main aspects of the video. Google™ allows a maximum of 32 tags for each video.

§Image preview of the Video: (mandatory parameter) this specifies a preview picture to associate with the video. Google™ advises you to give these thumbnails a minimum size of 120x90 pixel and to save them in .JPG, .PNG or .GIF format.

§Publication Date: (optional parameter) this specifies the video's publication date.

§Length (secs): (optional parameter) this specifies the duration of the video, in seconds. Google™ recommends that you give this information, and specifies that the duration must be between 0 and 28800 seconds (8 hours).

§Contents suitable for everybody: (optional parameter) this parameter is used to specify whether the video's contents are suitable for children. Google™ warns that, if a video is not indicated as suitable for children, it will only be viewable by users who have the Google Safesearch™ filter switched off. The Google™ Safesearch feature filters websites with explicit sexual or pornographic content and removes them from search results.

Best practices:

- | How to work with the Video/Audio Object
- | How to create and link the website's SiteMap

Further information:

-

Search engines and SEO optimization


E-mail Form Object

Step 3 - Page Creation >

E-mail Form Object

 Return to chapter overview
Show/Hide hidden text

When you are navigating in the Internet, you often come across pages which display a form where you are asked for personal details. These forms can be a means of contact, to ask you to register to receive information, to access Members' Areas, or simply for surveys or market research.

Whatever the purpose, with WebSite X5 you can create an e-mail form very easily. You can specify the fields you want in it, decide on the page layout and graphic appearance and, most importantly, stipulate how submitted data is to be collected and who receives it.

The commands for creating an E-mail Form object are organized in the List, Send and Style.

Click to expand/collapse Reference: Commands in the List section

Use the commands in this section to define the list of fields that you want to appear in your e-mail forms.

All the existing fields are shown in the table, that gives this information for each one: Field Name, Field Type, Width, if it is Mandatory and Description. These parameters can be set when creating a field, in the Insert Field window.

As well as summarizing the salient points of each field, the table can also be used for working on them:

§Double-click on a field to open the Insert Field window, where you can change any values previously entered;

§Click a second time on a selected field to change its name (you can also do this by opening the Insert Field window and changing the text entered as a label;

§Select a field and then use the button bar commands to make a copy, remove it, move it up or down or change its settings.

You can also check the layout of the fields in the form. A dotted line indicates how many rows there are in the field. If a field is on the same row as the previous field, the [image] icon is displayed next to its width. If the width of all the fields in the same row exceeds the total width of the row, the [image] icon signals this error. If you don't change the widths to correct the mistake, the fields that don't fit in the row will be displayed on the next row.

The commands for creating the list of fields in the form are shown next to the table:

§Add...: this opens the Insert Field window, where you can add a new field to the form.

§Duplicate: you can make a copy of the selected field.

§Remove: you can remove the selected field from the form.

§Move up / Move down: you can change the order of the fields, moving the selected one up or down in the list.

§Edit...: this opens the Insert Field window, where you can change the settings for the selected field.

The Send and Reset buttons (for sending the compiled form and for deleting all the information added to the form) are added automatically by the program at the bottom of the form.
Click to expand/collapse Reference: Commands in the Send section

Use the commands in this section to define how the data submitted in e-mail forms is to be treated.

In the Data submission box you have to specify how the website Administrator is to receive the data. You have the following options:

Send data by e-mail: is the default option. Data submitted through the forms is automatically sent via e-mail, using a PHP script.

Send data to a Database: the data submitted in the form is automatically sent to the specified MySQL database, using a PHP script.

Send data to a file: the data submitted through the form is saved in the specified script format (.PHP, .ASP, etc.). This option is useful if you want to use your own script, for example if .PHP is not available on your server, or if you want to include particular procedures or implement specific data management procedures.

You have to set a number of parameters for each send option:

Send data by e-mail:

§Sender e-mail address: this indicates the address from which to send the e-mail in reply to data submitted in the form.

By default, the send address is the same as the receiver which, in this case, is that of the website Administrator. If you specify that the send address is that of the visitor who filled in the form, it will be possible, for example, to use the e-mail Reply command.

§User e-mail address: this indicates the address that will receive the data submitted through the forms. You can type in more than one address: separate them with a semi-colon (;).

§Object: this indicates the subject of the e-mail containing the submitted data.

§Message: this is the text to be used in the e-mail.

§Include the collected data in CSV format: the submitted data is also saved in a .CSV file, and added to the e-mail. Data in a .CSV file is written in text form, like a long list of items, separated by a semi-colon (;): these files can easily be imported into spreadsheet programs (Microsoft Excel, for example).

Send data to a Database:

§Database Name: select the database from the list of those linked to the project. Use the commands in the Data Management window to create the list of databases to link to the project.

§Table Name: enter the name of the table in the database where you want submitted data to be added. If the table doesn't exist, it will be created automatically.

§Send an e-mail to notify the data has been received: a notification e-mail will be sent automatically when new data arrive.

§User e-mail address: You have to set a number of parameters for each send option:

enter the recipient address of the e-mail notifying data reception.

Send data to a file:

§Script file (e.g. PHP, ASP): you can import the script file to use for collecting and sending submitted data. You must create the script file manually.

If you do not select Send data to a file as a Data submission method in Confirmation e-mail for the user, the following options are displayed:

§Send a confirmation e-mail to the user: select this option if you want the visitor to receive automatic confirmation by e-mail when he submits data.

§Sender e-mail address: enter a valid and active e-mail address to use as the confirmation e-mail sender.

By default, the confirmation e-mail sender's address, which in this case is that of the website Administrator, is the address given as User e-mail address in the Data submission section. Enter a different Sender e-mail address if you want the confirmation e-mail to be sent from a different address, instead of the one that receives submitted forms. This option is useful if you prefer to communicate with visitors using a generic address (such as info@mycompany.com or noreply@mycompany.com) rather than a personal address (name.surname@mycompany.com).

§User e-mail address: you can specify which field in the e-mail form the confirmation e-mail address is to be taken from.

§Object: specify the subject of the confirmation e-mail.

§Message: specify the message of the confirmation e-mail.

§Include the collected data: add submitted data at the end of the confirmation e-mail.

Finally, you can select the following Options:

§Enable 'Captcha' anti-spam filter: you can add the Captcha anti-spam filter to the end of the e-mail form. A series of distorted letters is shown in a random order: the visitor must copy them correctly in the field in order to send his message.

§Confirmation page after sending data: this option displays the website Map where you can indicate the page that is to be displayed when the e-mail form has been filled in and the submitted data have been sent via e-mail. It is a good idea to have a specific page for this purpose, rather than using the Home page, so that you can include a thank-you message in it. This page must be Hidden Page in the Menu: the command for this is in Step 2 - Sitemap Creation.

You can customize the style of the e-mails that are sent automatically, using the options in the Styles and Models | E-mail window of Step 4 - Advanced Settings.
Click to expand/collapse Reference: Commands in the Style section

Use the commands in this section to set the style of the e-mail form you are creating.

First of all, select the Form Item you want to work on: choose it from the drop-down menu or click on the item in the preview.

You can customize these items:

Labels: this is a descriptive text of the field and it either indicates what information is required, or it asks a question.

Fields: this is where the visitor enters the necessary information.

Send' and 'Reset' buttons: these buttons are added automatically at the bottom of the e-mail form. They send the e-mail or clear all the fields, respectively.

Field Description and Validation: these are messages that may be displayed while the form is being filled in. They give extra information, indicate incorrect data or remind the visitor that a mandatory field has not been filled in.

The options available for these items are in the Style section:

Labels:

§Font Type: specifies the font, style and size to use for the text.

§Color: specifies the color to use for the text.

§Repeat: you can indicate where the field labels are to be. There are 3 choices: Display Labels above the Fields, Display Labels inside the Fields and Display Labels on the left of the Fields. If you choose to have labels on the left of the fields, you can specify the Width (%) as a percentage of the row in which it appears, and the Alignment of the labels.

Fields:

§Color: indicate the color to use for the text (for normal and "selected" states), for the background (normal and "selected" states) and for the border (normal and "error" states).

§Rounded Corners: you can define how rounded each corner is to be.

§Drop Shadow: applies a shadow inside the fields to give an impression of depth.

Send' and 'Reset' buttons:

§Font Type: specifies the font, style and size to use for the text.

§Color: specifies the color to use for the text, background and button borders.

§Rounded Corners: you can define how rounded each corner is to be.

§Background Image: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background.

§Show the 'Reset' Button: this is active by default. A "Reset" button is automatically added at the bottom of the form (to clear the contents of fields that have been filled in), next to the "Send" button.

Field Description and Validation:

§Field Description icon file: you can import a graphic file (in .JPG, .GIF and .PNG format) to use as an icon next to the field, indicating that further information is available.

§Show the Description when the Field is selected: select this option if you want a message with more information to be displayed automatically when the visitor clicks inside the field.

§If an error occurs during data validation: you can choose how the default message is to be displayed when a field is filled in incorrectly, or when a mandatory field has not been filled in. You can choose from Display the Browser's dialog window, Display internal popup window or Show Tip next to invalid Field.

When you preview your website, a message reminds you that e-mails with submitted data will not be sent. The Send E-mail Form feature only works fully when the website has been published on the Server.

The Send E-mail Form feature will function correctly if the Server on which the website is published supports the .PHP programming language and if the MAIL command is active. You can obtain this information on your Server diagnostics through the Website Test section of the Control Panel.

If problems occur when sending e-mails, it is possible that the Server you are using does not have a standard configuration. Try changing the script settings and those for sending e-mails, using the options in Advanced Settings | Data Management. For further information, contact your webspace provider.

Best practices:

-

How to work with the E-mail Form Object


The Insert Field window

Step 3 - Page Creation > E-mail Form Object >

The Insert Field window

 Return to chapter overview
Show/Hide hidden text

The Insert Field window opens when you press the Add... and Edit... buttons in the E-mail Form Object window. Here, you can create and define the fields in the e-mail form.

This window has the following sections: Field Type and Options.

Click to expand/collapse Reference: Commands in the Field Type section

You can use the options in this section to create the list of fields that will make up your e-mail form.

The available options are:

Text field: a single line of text shown as an empty box that the visitor can fill in as he wishes.

E-mail Address: a single line of text where the visitor must give an e-mail address. An automatic filter checks the address format: valid e-mail addresses contain the "@" character and a "." (dot).

Text Area: this text field covers more than one line, and the visitor can leave comments or ask questions.

Date: a text field where the visitor enters the date. It can either be typed in or selected from the calendar.

Drop Down List: the visitor must choose a reply from the drop-down list.

List: the visitor must select a reply from those in the list.

Multiple Choice: the visitor can select one or more replies from those in the list.

Single Choice: the visitor can choose one reply from those in the list.

Password: a text field in which the characters type in are hidden, and dots or asterisks are shown to cover the letters (depending on the operating system on the computer). This policy is adopted to ensure a visitor's privacy when entering a password to access a service.

Attachment File: a text field in which the visitor can specify a file to send as an attachment, using the [image] button to browse through the available files.

Contact your webspace provider to check that attached files are handled correctly.

Check Question: a text field in which the visitor enters the reply to a question. These questions are intended to differentiate between real people and spam programs that use contact forms to send undesired e-mail.

Agreement Conditions: a text field that gives the conditions that the visitor must agree to to submit the form. This field is used, for example, to show the conditions for matters of privacy on submitted data management.

Separator: this is a separator, and not a field, and it is used to separate the fields in sections and make long forms more user-friendly.

Various options may be presented, depending on the type of field selected. The options available for all fields are:

§Label: you can give a description of the field. This text will be displayed above, next to, or inside the field it refers to, to specify the requested information or to show the question the visitor is being asked.

§Width (%): you can define the field's width (from 5% to 100% of the available space).

§Display on the same row as the previous Field: select this option if you want your field to be on the same row as the previous field. Two fields can only be on the same row if their total width does not exceed the row's width.

§Set as Mandatory Field: this option makes the field mandatory for the visitor. It is not available for the Multiple Choice fields, and it is active by default for the Check Question fields.

The following options are field-specific:

Text field:

§Max number of characters: specify the maximum number of characters that can be entered in this field. For example, you can specify a maximum of 15 characters for a field where the visitor enters his VAT number.

§Input Text Filter: the visitor's data in the field will be checked. The possible filters are:

-None (characters and numbers): both characters and numbers are accepted.

-Numbers only: only numbers are accepted.

-Phone/Fax number (numbers and '-' and ' ' chars): numbers, the "-" character and spaces are accepted.

-Date (numbers and '/' and '. ' chars): numbers and the "/" character are accepted.

E-mail Address:

§Request e-mail address confirmation: adds another field in which the visitor must repeat his e-mail address. The exact correspondence between the two fields is checked automatically: if the fields do not match, a warning message is displayed.

Text Area:

§Max number of characters: specify the maximum number of characters that can be entered in this field.

§Number of rows: specify the height of the field, giving the number of rows to be displayed (max. 30).

Date:

§Date Format: you can choose the format for entering the date, selecting from the normal national and international formats.

§Display 'Calendar' icon: this option displays the "Calendar" icon next to the Date field. When this icon is clicked on, the visitor can select the date from a calendar, without having to type it in.

List:

§Number of rows: specify the height of the field, giving the number of rows to be displayed (max. 30).

Multiple Choice/Single Choice:

§Number of columns: this options defines the number of columns on which the possible choices are shown.

Password:

§Request password confirmation: adds another field in which the visitor must repeat his password. The exact correspondence between the two fields is checked automatically. If the fields do not match, a warning message is displayed.

Check Question:

§Correct answer: this field contains the correct answer that will be matched against the visitor's answer.

Agreement Conditions:

§Agreement Text: you can enter the text of the conditions that the visitor must accept before submitting data.

Finally, you can create a list of possible replies for the Drop Down List, List, Multiple Choice and Single Choice fields, with the following commands:

§Add / Remove: select a reply to add a new version or remove the current one.

§Move up / Move down: you can change the order of the replies in the list, moving the selected item one position up or down.

§Edit: you can edit the selected reply. If a reply is already selected, click again to edit it.
Click to expand/collapse Reference: Commands in the Options section

You can use the options in this section to set some advanced properties for fields in the e-mail forms.

The options are:

§Field Description: you can add a message that explains how to fill in the field. If you have set an icon for this field, the visitor can display the message by passing the mouse over the icon.

§<name> attribute: you can specify the value to be given to the <name> attribute of the field when the HTML code is generated for the e-mail form. This option is useful when, for example, the Send data to a file is set as the Data submission method (see E-mail Form Object | Send).

§Database Field Name: you can give a name to the field so that the submitted data is correctly recognized and added in the right place in the database. This option is useful, for example, when the Data submission method is set to Send data to a Database (see E-mail Form Object | Send).

Best practices:

-

How to work on the E-mail Form Object


Social Network Object

Step 3 - Page Creation >

Social Network Object

 Return to chapter overview
Show/Hide hidden text

Each one of us is probably part of at least one social network: by sharing messages, photos, videos or any other kind of content, we build up our online profile, create relationships and continuously expand our circle of contacts.

Many people currently interact online with the social networks, so it is important to make sure that websites communicate correctly with the various social profiles that are open. WebSite X5 does this through the Social Network Object that takes advantage of the plug-ins provided by the most common social networks: Facebook, Google+, Twitter, Pinterest. Obviously, the results depend on the plug-ins that are chosen but, generally speaking, they all have the objective of transforming website visitors into new contacts on the social networks, so encouraging contents to be shared.

Click to expand/collapse Reference: The social networks that are available

First of all, you need to select an item to add from the Social Network list. The items available are:

§AddThis - 'Share' Buttons: this option adds a button bar and/or a menu that the visitor can use to select a social network on which he wants to share his contents with his contacts.

For further information on how the AddThis plug-in works, see http://www.addthis.com/social-plugins

§Facebook - Comments Box: this option adds a Facebook section, where visitors can leave their comments.

§Facebook - 'Like' Box: this option inserts a box where visitors can read the latest posts on a Facebook wall and click on the "I like" button to follow it.

§Facebook - 'Like' Button: this option inserts the "I like" button, so visitors can click on it and share the contents they like with their friends on Facebook.

For further information on how Facebook plug-ins work, see https://developers.facebook.com/docs/plugins/

§Google Plus - 'Plus 1' Button: this option adds the "Follow" button: visitors who click here can recommend contents they like and want to share on Google+ through Google Search

§Google Plus - Badge: this option adds a badge, and visitors can read a person's profile on Google+ and follow that person.

§Google Plus - Icon: this option adds a button so that visitors can read a person's profile on Google+ and follow that person.

For further information on the Google+ plug-ins work, see https://developers.google.com/+/plugins/

§Twitter - 'Tweet' Button: this option adds the "Tweet" button: if visitors click here they can share the website with their followers on Twitter.

§Twitter - Account Box: this option adds a box where visitors can read the latest tweets on a Twitter account and join in the discussion.

§Twitter - 'Follow' Button: this option adds the "follow" button: visitors can click here to follow a Twitter account.

For further information on how the Twitter plug-ins work, see https://dev.twitter.com/docs/twitter-for-websites

§Pinterest - 'Follow' Button: this option adds the "Follow" button: when visitors click on it they can follow a Pinterest account.

§Pinterest - 'Pin It' Button: this option adds the "Pin It" button: when visitors click here they share contents they like on Pinterest.

For further information on Pinterest plug-ins, see http://pinterest.com/about/goodies/
Click to expand/collapse Reference: Available settings

Obviously, for each item selected from the Social Network list, there are specific Settings available, with which you can define how each works. Apart from the options related specifically to the style, you need to pay particular attention to the following parameters:

AddThis - 'Share' Buttons

§Username: this is the username that you receive when you open an account on AddThis. Website Administrators with an account on AddThis should specify their role to be able to consult statistics on how visitors use the service on the website.

Facebook - Comments Box

§Website URL: this parameter specifies the URL of the website that visitors make comments on. Usually, the "Comments" box is added to the website page that visitors comment on: in this case, the URL must correspond to the page containing the "Comments" box.

Facebook - 'Like' Box

§Profile URL: this parameter specifies the URL of the Facebook page to link to, in order to show the contents and ask visitors to follow it, clicking on the "I like" button.

Facebook - 'Like' Button

§Website URL: this parameter specifies the URL of the website that visitors judge, clicking on the "I like" button.

Google Plus - 'Plus 1' Button

§Website URL: this parameter specifies the URL of the website that visitors can recommend to their contacts.

Google Plus - Badge / Google Plus - Icon

§Profile URL: this parameter gives the URL of the Google+ profile to be linked to so that visitors can follow it.

Twitter - 'Tweet' Button

§Website URL: this parameter gives the URL of the website that visitors can post on their Twitter profile.

Twitter - Account Box / Twitter - 'Follow' Button

§Username: this is the username for a Twitter profile.

Pinterest - 'Follow' Button

§Username: this is the username for a Pinterest profile.

Pinterest - 'Pin It' Button

§Website URL: this parameter gives the URL of the website that is the source of the pictures that visitors can pin on their Pinterest pinboards.

§Image URL: this parameter gives the URL of the picture that visitors can pin on their Pinterest pinboards.

Notes on compatibility with the previous versions:

In version 9, this object was available as a widget in HTML and Widgets Object.


Guestbook Object

Step 3 - Page Creation >

Guestbook Object

 Return to chapter overview
Show/Hide hidden text

The Guestbook lets website visitors leave their signature or a comment and/or give a vote. It's made up of a short form that visitors fill in, and a list of comments that have been made by other visitors.

WebSite X5 lets you customize the Guestbook, and manage the publication of comments using a specific online control panel.

Click to expand/collapse Reference: Guestbook settings

To create a Guestbook, you need to define the Content Type that visitors can leave, choosing between:

Comment and Vote: visitors can write a comment and vote the website.

Comment: visitors can write a comment, but they can't vote.

Vote: visitors can vote, but they can't write a comment.

You can choose options for the Comments Settings, depending on the Content Type you have selected:

§View Mode: you can decide whether comments made by visitors are to be pulished immediately online, or whether they are to be approved first, using the commands in the online control panel.

§View Order: you can define the chronological order to the published comments, from the most recent to the earliest, or vice versa.

§Show 'Abuse' button: select this option is you want an "Abuse" button added, so that visitors can report objectionable conduct.

§Enable 'Captcha' anti-spam filter: you can add the Captcha anti-spam filter to the end of the comment form. A series of distorted letters is shown in random order and visitors must copy them correctly in a field in order to submit their comment.

§Vote Style: select this option to define the style of the element that visitors can vote (for example, 5 stars). This is the only option available if you select Vote as Content Type.

The following Properties can be set for each Content Type:

§Height: you can define the height in pixels of the Guestbook Object. Each time a visitor leaves a comment and this is published online, the comment is added to the list of those already made: you can set the height of the object so that, after a certain number of comments, the list can be scrolled to view the rest.
Click to expand/collapse Reference: Submitting Guestbook data

You can indicate how data submitted in the comments form is to be saved and handled by the website administrator in the Data Save Settings section:

§Subfolder on the Server where to save data: specify the folder on the server (with PHP write access) in which the submitted data is to be saved. The main server folder name is specified by the Server folder with write access option in the Data Management window. If you do not specify a sub-folder, the data will be saved in this one.

§Send an e-mail to notify the comment has been received: a notification e-mail will be sent automatically when new data arrive.

§User e-mail address: You have to set a number of parameters for each send option:

enter the recipient address of the e-mail notifying data reception.

Providers usually give write access to all folders on the server: if this is the case, you don't need to give the pathname of the public folder. In all other cases, contact your webspace provider for the complete public folder pathname.

You can check in the WebSite Test section of the online control panel whether the folder with write access, and any sub-folders inside i, actually exist and, if so, if you have write access to them (so that you can save the data).

The page containing the Guestbook Object must be saved in .PHP format, for the Guestbook to work correctly.

Use the File Name Format option in the Page Properties | Expert window to specify page formats.

Notes on compatibility with the previous versions:

In version 9, this object was available as a widget in HTML and Widgets Object.

Best practices:

-

How to manage comments in the Blog and Guestbook from the online Control Panel

Further information:

-

Online Control Panel


Map Object

Step 3 - Page Creation >

Map Object

 Return to chapter overview
Show/Hide hidden text

Commercial websites usually have a contact page, and most of them now include an interactive map that shows the company's geographical location. These maps are useful because they provide potential customers with the company's address and indications on how to reach it.

WebSite X5 lets you add a map to your website, using the Google Maps™ service, via the Map Object.

Click to expand/collapse Reference: Settings for an interactive map

The Settings you need to define for creating an interactive map are:

§Address: this is the address to be highlighted on the map.

§Display: this setting specifies how the map is to be viewed: Map, Satellite or Earth.

§Language: this setting defines the language to be used for the map.

§Size: this setting defines the size of the map. Leave the Keep Ratio selected to keep the ratio between width and height.

Notes on compatibility with the previous versions:

In version 9, this object was available as a widget in HTML and Widgets Object.


Flash Animation Object

Step 3 - Page Creation >

Flash Animation Object

 Return to chapter overview
Show/Hide hidden text

WebSite X5 lets you add various types of animation and special effects to your pages, so that you can make them more attractive and interesting.

You can import all kinds of Flash animation (in .SWF format), from simple banners with text and images to more complex and interactive video clips. They can either be imported from your own computer or taken from the Internet. You can use the available advanced features for attaching any files that are necessary for the animation to work correctly.

The commands for creating a Flash Animation Object are organized in the Basic and Expert sections.

Click to expand/collapse Reference: Commands in the Basic section

Use the commands in this section to import the files you need to create the Flash Animation Object.

The Flash animation file can be imported from your computer or the Internet. If it is on your computer, select the Local File on PC option, click on the [image] button to look for the file (in .SWF format). In the second case, select the Internet file option and enter the address where the file(s) you want are located on the Internet.

Select the Preview option to have a look at a preview of the imported animation in the preview window.

You will need to install the Adobe® Flash® player to be able to see the preview. It is available at http://get.adobe.com/it/flashplayer/otherversions/ (choose the "Other browsers" option).

You can define the following Properties for the animation that you have inserted:

§Alternative Text: this is the text that will be shown if, for some reason, the animation cannot be displayed.

§Size: this setting gives the width and height in pixels of the Flash animation. The maximum width possible is indicated in brackets, and depends on how the page layout table has been set up. Leave the Keep Ratio selected to keep the ratio between width and height.

§Player version: this indicates which version of the Flash player is required to play the inserted animation. If the visitor does not have the correct version, a message is displayed automatically, asking him to update it.

§Transparent Background: if this option is selected, the inserted animation's background is transparent.
Click to expand/collapse Reference: Commands in the Expert section

You can use the commands in this section to import any files which are necessary for the correct functioning of the Flash animation.

All the files that are linked to the imported Flash animation are listed in a table that gives the filename and the Relative Server path.

Use the following commands to create the list of files linked to the Flash animation:

§Add...: this command opens the Upload linked file window, where you can add a new file linked to the Flash animation.

§Edit...: this command opens the Upload linked file window, where you can change the settings for the selected file in the table.

§Remove: this command deletes the selected file from the list.

Finally, you can use this option:

§Pathname for uploading the Flash file: to specify the pathname of the folder in which the .SWF file linked to the Flash animation is to be published.


Products List Object

Step 3 - Page Creation >

Products List Object

 Return to chapter overview
Show/Hide hidden text

One of the most interesting features in WebSite X5 is the E-commerce facility: you can create online stores to show your products in a virtual shop window that is open to the world, and sell them directly online.

As well as adding products and managing online shopping carts, you can also create online catalogs with WebSite X5's Product List object. Customers can browse through the contents, read a description of each article on the product cards and buy the article they are interested in.

The commands for creating a Product List object are available in the List and Settings sections.

Click to expand/collapse Reference: Commands in the List section

Use the commands in this section to specify which products are to appear in the Product List object.

The column in the left side of the window shows the Category and Product List inserted when the Shopping Cart was created in Step 4 - Advanced Settings.

There is a check box next to each category and product: click on the check boxes to add categories/products to the Product List you are creating. All the selected products are shown in the column on the right side of the window.

Selecting a category or selecting all the products in a category is not the same thing: only in the first case, if new products are subsequently added to the category you added to the Product List, they too will be added automatically to the same Product List.

You can decide how you want the products in the righthand column to be ordered: click on the Sort order button and choose Custom, First Name, Category, Price, Ascending or Descending.

If you choose Custom you can use the Move up / Move down buttons to order the products as you want them to appear.

Click to expand/collapse Reference: Commands in the Settings section

The commands in this section allow you to define the style of the product cards that describe the products in the list.

First of all, you have to indicate the Display Mode for the product cards:

Text Only

The product card shows the product name, description, a drop-down list of variations (if there are any), price, quantity and the "Buy now" button.

Image and Text

The product card has a picture of the product on the left and all the information on the product on the right.

Text and Image

The product card has a picture of the product on the right and all the information on the product on the left.

Image Only

All the information on the product is given underneath the picture. The detailed description is not included.

Alternate Image and Text

The product cards alternate with the picture on the left/text on the right and picture on the right/text on the left.

You can use the options in Frames Settings to define:

§Frame per row: how many product cards there are in a single row.

§Frame height: the height in pixels of the product cards. The pictures of the products will be resized automatically according to the given height. If the product descriptions are too long to be displayed completely, a scroll bar is added.

§Image width (%): how much space is occupied by the picture and how much by the text, if you have chosen a layout with picture and text side by side. For example, if the picture takes up 30% of the space, the remaining 70% is taken up by the text.

§Inner Margin: how wide the margin is to be (the margin is the space between the product card's border and the contents).

You can use the Graphic options to define:

§Text Color/Background Color: the colors to use for the text and the background of the product cards.

§Font Type: specifies the font, style and size to use for the text.

You can use these Options to define:

§Thickness: the thickness of the borders (each one may be defined separately).

§Color: the color of the borders (again, each border can be colored separately).

§Rounded Corners: how rounded the corners are (each one can be defined separately).

§Drop Shadow: a shadow, specifying its color, position, diffusion and size.

You can use these Options to define the following settings:

§Show Price: this displays the product's price, with or without VAT, in the product card.

§Show Quantity Field: this displays a quantity field in the product card so that the customer can indicate how many items of a product he wants to add to the shopping cart.

§Enable Link over the image: this setting links the pictures in the product cards to their enlarged versions, which will be displayed in the ShowBox.

You can customize the style of the Showbox: using the options in the Styles and Models | E-mail section of Step 4 - Advanced Settings , you can define colors, shadows, opacity, entry effects, etc.

For the Product List object to work correctly, you must already have added products to the shopping cart, using the commands in the Shopping Cart section of Step 4 - Advanced Settings.

Best practices:

- | How to work on the Products List Object
- | How to create an e-commerce shopping cart


HTML and Widgets Object

Step 3 - Page Creation >

HTML and Widgets Object

 Return to chapter overview
Show/Hide hidden text

WebSite X5 provides a specific object for each type of content matter that you want to add to a page: text, pictures, animation, e-mail forms, etc. And with the HTML and Widgets Object object, the possibilities are practically unlimited. With this object, you can add HTML code directly to pages and thus include features that would otherwise have been impossible to use.

Widgets are particularly useful: they are short, ready-to-use programs that carry out a specific function. A good example of a widget is Google News™: you only have to set a few parameters to add a box with all the latest news, updated in real time.

The commands for creating a HTML and Widgets Object are organized in the HTML Code and Expert sections.

Click to expand/collapse Reference: Commands in the HTML Code section

In this section you have an editor for including the HTML code that you want to add to a page. You can either type it or double-click on one of the available widgets.

The editor in the HTML Code box includes the following commands:

Cut [CTRL+X] - Copy [CTRL+C] - Paste [CTRL+V]

These commands cut, copy and paste the selected section of code.

Undo [CTRL+Z] - Redo [ALT+CAPS+BACKSPACE]

These commands undo/redo the last operation.

Syntax highlighting has been introduced in the HTML editor to make reading/writing the code easier. Certain parts of the code are shown in different colors, without changing the meaning of the text. In this way, it is easier to read the code and find any mistakes.

The Widget List shows a list of all the available widgets. Double-click on a widget to open the Widget window where you can set various parameters. When you confirm the HTML code for the widget, this is composed and automatically added to the editor.

Notes on compatibility with the previous versions:

Objects available - In version 9, the Guestbook, Social Network buttons and the Map were available as widgets: in version 10 they are now Objects (see Step 3 - Page Creation).

The following options are available under Properties:

§Width: this gives the width of the HTML and Widgets Object; it is set automatically according to the space available in the page layout table.

§Height: this option sets the height of the HTML and Widgets Object.

§Show Scrollbars: this option is active by default: a scroll bar is added automatically if the HTML and Widgets Object is bigger than the value specified in the Height option.
Click to expand/collapse Reference: Commands in the Expert section

Use the commands in this section to create a stylesheet (.CSS) and/or create the list of files to attach to the HTML and Widgets Object you are working on.

Use the editor in the CSS Code box to enter the stylesheet code (the editor is identical to that used for HTML code). The purpose of CSSs is to define the graphic appearance of the HTML pages they are linked to.

The Files linked to HTML code table gives the names of all the linked files and their Relative Server path.

You can use the following commands to create the list of files linked to the HTML code:

§Add...: you can add a new file to the list, in the Upload linked file window.

§Edit...: this opens the Upload linked file window, where you can change the settings for the file selected from the linked file table.

§Remove: you can delete the selected file from the linked file table.

Further information:

-

HTML, HTML5 & CSS


Image Editor

Step 3 - Page Creation > Common features >

Image Editor

 Return to chapter overview
Show/Hide hidden text

As well as optimizing imported pictures, WebSite X5 also provides a versatile built-in graphic editor for adding professional finishing touches to the pictures.

The Image Editor can be opened by pressing the Edit... button, which is usually found in the windows where graphic files can be imported, such as Image Object, Gallery Object and Shopping Cart.

The Image Editor is organized in the following sections: Crop and rotation, Filters, Watermark, Mask, Frame, Effects and Library.

The Image Editor also has the following buttons:

§&OK: this button closes the Image Editor and takes you back to the main window, saving any changes you may have made.

§&Cancel: this button closes the Image Editor and takes you back to the main window, without saving changes.

§Save As...: this button saves a copy of the original picture in .PNG format.

Click to expand/collapse Reference: Commands in the Crop and rotation section

You can use the commands in this section to define the part of the picture you want to display and delete the rest.

You can mark the area you want to keep (the crop box) on the picture's preview and use the anchors to change the size. You can also move the crop box to bring a detail into the foreground: click on it, hold down the left button of the mouse and drag it to a new position.

You don't have to confirm the crop: the area outside the crop box (darker than the original) will not be displayed. If you change your mind and want to undo the crop box, just click on the area outside it to remove the box and cancel your selection.

The following options are shown in the window, next to the picture:

§Crop: this option shows the values (in pixels) of the X-coordinate and Y-coordinate that correspond to the upper left apex of the selected area. It also gives the Width and Height of the area. You can change the size of the selected area by changing the values shown here (as an alternative to pulling on the anchors of the crop box).

§Mirror: you can flip the picture horizontally or vertically.

§Rotation: you can rotate the picture clockwise by 0°, 90°, 180° or 270°.
Click to expand/collapse Reference: Commands in the Filters section

You can use the options in this section to correct the color and add graphic filters to the imported picture.

If you want to apply a filter, select it from the list, activate it and define the settings. Changes made to the filters are applied immediately and displayed in the picture's preview.

§Filters: this option lists the filters that are available. The list includes Brightness/Contrast, RGB, HSL, Sharpen, Blur, Black and White, Sepia, Mosaic, Portrait, Diffusion, Oil Paint, Canvas, Noise, Marble. Click on one of the filters to apply it to the picture: its check box will be ticked..

§Settings: you can change the settings of the selected filter.
Click to expand/collapse Reference: Commands in the Watermark section

You can use the commands in this section to apply a watermark to the imported picture, to protect it against unauthorized copying. The watermark alters the picture, sometimes giving copyright information, and so discourages people from making copies of it or using it in any other way.

§Watermark: this option lists the various watermarks that you can apply to the picture. You can also apply a custom watermark: select the second preview from the list (Custom...) and import the graphic file that you have prepared.

§Settings: you can rotate the watermark by 90°, 180° or 270° or flip it horizontally/vertically.

A watermark must be a graphic .GIF, .PNG, .PSD or .WMF file, with a transparency setting. The watermark is applied over the original picture so that only the parts that correspond to the transparent areas of the watermark can be seen.

The .GIF format can only handle one transparency level, whereas the .PNG and .PSD formats handle up to 256, so you should save your watermark in one of these two formats.

+

=

Click to expand/collapse Reference: Commands in the Mask section

You can use the commands in this section to apply a mask to the imported pictures, in order to alter their appearance.

§Mask: this command lists the various masks that you can apply to your picture. You can also apply a custom mask: select the second preview from the Custom... list and import the graphic file you have prepared.

§Settings: you can rotate the mask you have applied by 90°, 180° or 270° or flip it horizontally/vertically.

A mask is basically a 256-color image in various shades of gray: a mask is applied over the original picture so that the parts covered by the black areas are invisible and the parts covered by the white areas remain on view.

+

=

Click to expand/collapse Reference: Commands in the Frame section

You can use the commands in this section to apply a frame to the imported picture.

§Frame: this command lists the frames you can apply to your picture. You can also apply your own frame: select the second preview from the list (Custom...) and import the graphic file you have prepared that contains the custom frame.

§Settings: you can rotate the frame by 90°, 180° or 270° or flip it horizontally/vertically.

A frame must be a graphic file in .GIF, .PNG, .PSD or .WMF format, with a transparency setting: the frame is applied over the original picture so that only the parts that correspond to the transparent areas of the frame are visible.

The .GIF format can only handle one level of transparency, whereas the .PNG and .PSD formats can handle up to 256, so you should save your frames in one of these two formats.

+

=

Click to expand/collapse Reference: Commands in the Effects section

You can use the commands in this section to apply special graphic effects to the imported picture.

§Effects: this command lists the effects you can apply to the picture. They are Drop Shadow, Mirror, Outer Glow, Colored border, Gradient, Bevel, Ridge, Frame, Rotation, Perspective, Skew and Opacity. Click on the effect you want to apply (its check box will be ticked).

§Settings: you can change the settings of the selected effect.
Click to expand/collapse Reference: Commands in the Library section

You can use the commands in this section to apply a stylesheet to the current picture, or you can save the settings for this picture in a new stylesheet that can then be applied to other pictures.

§Apply: this command applies the selected stylesheet to the current picture.

§Add: this command saves the settings defined so far in the Image Editor sections for the current picture and create a new stylesheet with them. The new stylesheet is added to the list of Custom style sheets.

§Remove: this command deletes the selected stylesheet from the Custom. stylesheets. You cannot delete the Presets stylesheets.

Best practices:

-

How to work with the Image Object


Cell Style

Step 3 - Page Creation > Common features >

Cell Style

 Return to chapter overview
Show/Hide hidden text

WebSite X5 makes it easy for you to create pages in your website by dividing the space into cells in the page layout table. The number of cells depends on how many rows and columns there are in the table. To create a page (add contents to it), all you have to do is drag and drop objects into the cells (one for each cell).

A cell is a precise area of the page: it has its own contents and may have its own style. You can define the margins, borders and background of a cell so that the contents of the page are all given the right amount of emphasis.

To define the style of a cell, select it and click on the [image] button to open the Cell Style window. The options in this window are divided into the Style, Text and Library sections.

Click to expand/collapse Reference: Commands in the Style section

You can use the commands in this section to define the style of the current cell in the page layout table.

First of all, you have to choose the type of Background you want to for the cell, and you can choose from:

Colored background: the background is filled with a solid color.

Gradient background: the background is filled with shaded color and you can specify the first and final colors, and the direction of the shading.

Image background: an image is used as the cell's background.

Fit to Cell background: the background image is cut and fitted exactly to the size of the cell (see How to work on the cell style)

You can now specify the Settings for each background style.

 | Colored background | Gradient background | Image background | Fit to Cell background
§Background Color: specifies the color to be used as the background filler color. | P | - | P | P
§Start Color / End Color: specify the first and final colors of the shading. | - | P | - | -
§Diffusion: indicates whether the first or final color is the most important, defining the space (in pixels) in which the transition from the first and final color is to occur. For example, a vertical shading that passes from gray to white, will graduate fade from gray to white in the first 250 pixels, after which the background will be completely white. | - | P | - | -
§Direction: you can choose in which direction the background color is to be shaded, from the Top, Bottom, Left or Right. | - | P | - | -
§Image File: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background. | - | - | P | P
§Repeat: indicates whether the page background image is to be repeated, or not. It can be repeated horizontally, vertically or in both directions so that it occupies all the available space. The background image can also be resized so that it adapts to the available space. | - | - | P | -
§Alignment: you can specify how the background image is to be aligned inside the cell area. | - | - | P | -
§Color Saturation: you can change the color hue of the background image: a "coloring" effect is applied to the image so that it tends towards the color you want. | - | - | P | -
§Block width / Block height: you can set the size of the portions of the image to be cut, so that you can indicate which parts of the image are to remain fixed, and which are to be repeated (see How to work on the cell style). | - | - | - | P
§Opacity: you can set the amount of transparency of the background image's color/shading. Values closer to 0 increase transparency, letting the page's background show through. | P | P | P | P

You can use the options in the Border section to define:

§Thickness: the thickness of the borders (each one may be defined separately).

§Color: the color of the borders (again, each border can be colored separately).

§Rounded Corners: how rounded the corners are (each one can be defined separately).

§Drop Shadow: a shadow, specifying its color, position, diffusion and size.

Finally, you can use the options Alignment and Margin to define the following:

§Alignment: this option aligns the object with the Top/Center/Bottom and Left/Center/Right of the current cell.

§Outer Margin / Inner Margin: these options set the value in pixels of the outer and inner margins of the current cell (see The Box Model in WebSite X5).

Notes on compatibility with the previous versions:

In the previous versions, the options for cell margins and cell content alignment were found in menus shown by the [image] and [image] buttons in the toolbar above the page layout table. In version 10, these buttons have been removed, and the options are now in the Cell Style| Style window.
Click to expand/collapse Reference: Commands in the Text section

Use the commands in this section to add and define the style of the text that complete the style of the current cell in the page layout table.

First of all, you have to select the element - text or image - that you want to add and work on. You can choose from:

Title: this is the text that will be displayed as the title of the current cell.

Header Image: this is a picture that will be included in the current cell's header, next to the Title.

Description Text: this is the text that will be shown as a caption under the current cell.

Once they have been added, you can select the various elements either by clicking directly on the preview or by selecting them from the dropdown menu.

There are a number of options in the Settings section, depending on the type of element that you have selected:

These options are available for Title and Description Text:

§Content: enter the text for the title or cell description.

§Background Color / Text Color: you can specify the foreground and backgrounds for the text you are working on.

§Font Type: specifies the font, style and size to use for the text.

§Alignment: you can specify how the text is to be aligned in the cell: to the Left, in the Center or to the Right.

§Outer Margin / Inner Margin: you can specify the value in pixels for the text margins, so that it is positioned at precisely the distance you want it from the cell's borders.

The following options are available for the Header Image:

§Image File: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background.

§Alignment: you can specify how the image is to be aligned in the cell: to the Left, in the Center or to the Right.

§Margin: you can specify the value in pixels for the image's margins, so that it is positioned at precisely the distance you want it from the cell's border and, consequently, with respect to the Title.
Click to expand/collapse Reference: Commands in the Library section

In this section, you can choose existing settings, saved as a Style, to apply to the current cell, or you can save the settings of the current cell as a new Style, to be used for other cells.

The Library lists all the Presets and Custom Styles that have been created so far. These commands are available:

§Apply: you can apply the selected Style settings to the current cell.

§Add: you can save the graphic settings defined in the Style and Text sections for the current sell in a new Style and add it to the list of Custom Styles.

§Remove: you can delete the selected Style from the Custom Style list. You cannot delete Presets Styles.

When a new Style is being created, all the settings for the current cell are maintained, but not the contents, which could obviously vary from one cell to another. For example, the Text Color or Font Type is saved in the new Style, but not the Content that has been specified for elements such as the Title or the Description Text of a cell.

Best practices:

-

How to work with the Cell Style

Further information:

-

The Box Model in WebSite X5


The Link window

Step 3 - Page Creation > Common features >

The Link window

 Return to chapter overview
Show/Hide hidden text

As well as the fixed navigation menus, created automatically from the website Map, WebSite X5 lets you apply links to text, pictures and other elements. These links may open internal/external pages, open files, display images, add a product to the shopping cart, and so on.

When you apply a link, you define its action, and you can also define and customize a Tooltip to associate with it: a Tooltip briefly explains what will happen when a visitor clicks on the link.

The options for setting up a link are available in the Action and Description sections.

Click to expand/collapse Reference: Commands in the Action section

You can use the commands in this section to indicate the action to be associated with the link:

Website Page

You can create a link to another page in the website. Click on the [image] button to browse the website Map and select the Website Page to link to. If you need to, you can also specify the Internal Page Anchor to link to, selecting one from the list of anchors in the page. You can also specify whether the linked page is to be opened in the same window, in a new browser window or in a popup window. In the latter case, a new browser window is opened and you can set its Tooltip width and Height.

Anchors must have been previously associated with objects before they will appear in the Internal Page Anchor list.

You can associate anchors with objects by clicking on the [image] button, in Step 3 - Page Creation.

File or URL

You can create a link to an external resource, file or HTML page, that is on your computer or on the Internet. To specify which file you want to link to, select the Local File on PC option and click on the [image] button to browse through the resources and locate your file, or select the Internet file option and type in the URL address that gives its position on the Internet.

Again, you can specify whether the linked resource is to open in the same window, in a new browser window or in a popup window and, in this case, give the Tooltip width and Height for it.

File or URL with ShowBox

You can create a link to display a file, present on your computer or on the Internet, in a ShowBox. Unlike the popup window, the file in the ShowBox is shown in the foreground of the original page, which is automatically shaded (either lighter or darker).

To specify the file to link, select the Local File on PC option and click on the [image] to browse through the resources on your computer, or select the Internet file option and type in the URL address to locate the file's position on the Internet. Use the available options to define the Tooltip width and Height of the ShowBox window, and a Caption that will be displayed underneath it.

Links with a ShowBox window are useful to display things such as pictures .PDF documents.

ShowBox Gallery

You can create a link to display a gallery of pictures inside a ShowBox window. To create the list of pictures, you can use the Add..., Remove, Move Up and Move Down. You can also define the size of the ShowBox window with the Width and Height) options.

You can customize the style of the Showbox: using the options in the Styles and Models | E-mail section of Step 4 - Advanced Settings , you can define colors, shadows, opacity, entry effects, etc.

E-mail Address

You can create a link to open the default e-mail program and send an e-mail. To set a link of this kind, type in the e-mail address and the subject and content of the message (optional).

If you select Enable e-mail address protection, the specified e-mail address will be encrypted in the page's HTML code, so that it cannot be recognized by spyware searching the Internet for addresses to use in spam campaigns.

Internet call

You can create a link to open an Internet phone call program (e.g. Skype) and chat to the person indicated in the relevant field. You can also specify the Action Type, choosing from Call, Add contact, Chat, Show profile, Skype VoiceMail and Send file.

Sound

You can create a link to generate sound. To choose the audio file to link to, select Local File on PC and click on the [image] to browse through the resources on your computer, or select Internet file and type in the URL address that locates it on the Internet. You can link files in .MP3 format.

When a visitor clicks on the link a Tooltip opens and shows the Play/Pause button to start/stop the audio. When the mouse cursor is moved out of the Tooltip, the popup window is closed and the sound stops.

The Tooltip on an audio link is created automatically by the Program: the style depends on the settings given in the Styles and Models | Text window of Step 4 - Advanced Settings.

Print Page

You can create a link to print the page on display.

Message Box

This creates a link to a warning message. To create a link of this kind, type in the Message Text in the field. If you select Show as a popup window, the warning message is displayed in a Windows-type dialog box.

RSS Feed

You can display the website's RSS feed: the link is only active if an RSS feed has been created in Step 4 - Advanced Settings.

When you test your website, a message appears to remind you that RSS feeds will only be displayed when the website has been published on the Internet.

Blog

You can create a link to open the Blog associated with your website. You must have already created the Blog in Step 4 - Advanced Settings.

Use the options to specify whether the linked Blog is to be shown in the same window, or if a new browser window is to be opened.

Sitemap

You can create a link to the website Map, to be displayed in a new page. The items in the Map, which is created automatically, are active links to the single pages, so the Map is useful for moving around the website. Use the Expand All and Collapse All controls to display/hide elements in the Map.

View the Shopping Cart

You can use this option to create a link to the shopping cart page, with a list of all the products ordered so far.

Add to Cart

You can create a link to the e-commerce shopping cart, so the visitor can place an order or add products to the shopping cart.

In the first case, select Show the Product List of the selected Category and then the category from the Product Category table.

In the second case, select Add the selected Product directly to the Cart and then choose a product from the list. You can also specify the Option and Quantity of the product you want to add to the shopping cart.

The View the Shopping Cart and Add to Cart links only work correctly if you have already created the shopping cart in the Shopping Cart section of Step 4 - Advanced Settings.
Click to expand/collapse Reference: Commands in the Description section

You can use the options in this section to add a description to the link. This description is used as the text for an explanatory note, called a "Tooltip" (or just "tip"). The tip is shown next to the mouse cursor when this moves over the link, and should explain what will happen if the visitor clicks on the link: "you'll go to a new page", "you'll go to a new website", " a file will be downloaded", etc.

The commands for writing a Tooltip are:

§Text: type in the description of the link.

§Image File: add a picture to be displayed in the Tooltip, or instead of the description.

§Tooltip width: specify the width, in pixels, of the Tooltip.

§Image width (%): specify the width on the picture as a percentage of the Tooltip's width.

§Image Position: specify how the picture is to be aligned with the text in the Tooltip.

Text, Image File and Tooltip width vary for each link, so they have to be defined each time. Other graphic styles of the Tooltip are true for the whole project, and are defined in the Styles and Models | Text window of Step 4 - Advanced Settings.

Best practices:

-

How to create and use anchors

Further information:

-

Navigation


The Effect Properties window

Finestra Effect Properties

Step 3 - Page Creation > Common features >

Finestra Effect Properties

 Return to chapter overview
Show/Hide hidden text

In this window, you can define entry effects for pictures in a SlideShow object, available in the editor for Edit Graphic Template, pictures selected in the Gallery Object and pictures in a Product list SlideShow (see Products List Object).

The commands are organized in the following sections: Effect Type, Zoom and Position and Page.

Click to expand/collapse Reference: Commands in the Effect Type section

Use the commands in this section to choose the entry effect to apply to the picture you are working on:

§Effect List: a list of all the available effects is displayed. If you select "1 - Random" the selected effect to applied to the pictures in the SlideShow in a random order. When you make a selection, the effect on the SlideShow is shown in the preview.

§Display time: you can define hown many seconds each picture is displayed for.
Click to expand/collapse Reference: Commands in the Zoom and Position section

You can specify the amount of zoom and the movement of picture you are working on.

§Start position: enter the zoom percentage and the X and Y coordinates from where the picture starts moving.

§Final position: enter the zoom percentage and the X and Y coordinates of the position where the picture stops moving.

In both cases, instead of specifying the X and Y coordinates, you can drag the preview picture to the required position, so defining the start and final positions.

You can apply an entry effect and a zoom-and-position effect to the same picture. the entry effect is applied first, and the picture is displayed according to the coordinates and size specified for the start position. Then the picture is moved and re-sized, until it reaches the coordinates and size specified for the final position.
Click to expand/collapse Reference: Commands in the Page section

This section is only available for pictures in a SlideShow object that has been added to the page's header/footer (see Edit Graphic Template).

The website's Map is opened: tick pages you want the picture you are working on to be displayed in. With this option, you can display different parts of the same SlideShow in the header/footer in different parts of your website.

Specifying in which pages a particular picture of a SlideShow is to be shown can be useful when, for example, you want to add adverts. In the SlideShow, you can set all the banners to use in the website: with this feature, you can ensure that only relevant messages are displayed in specific pages or sections.


The Upload linked file window

Step 3 - Page Creation > Common features >

The Upload linked file window

 Return to chapter overview

This window opens when you click on the Add... button in the list of files linked to a Flash animation (see Flash Animation Object | Expert) or to HTML code (see HTML and Widgets Object | Expert).

The available commands are:

§Linked file to upload to Server: you can select a file to import, because it is linked to the object you are working on.

§Server relative path: enter the pathname of the folder where the imported file (linked to the object) is to be uploaded.

§Link file to Page (.js and .css files only): if the imported file is a JavaScript (in .JS format) or a style sheet (in .CSS format), it must be linked to the code page to work properly. When you select this option, the necessary code is automatically added to the <HEAD> section of the page's HTML code.


Advanced Settings

Step 4 - Advanced Settings >

Advanced Settings

 Return to chapter overview

When you have created the website Map in Step 2 and the various pages and their contents in Step 3, you can move on to Step 4, where you will be able to choose from a number of advanced features to complete and perfect your website. You can customize the appearance of menus and text, and you can also add many important features such as an e-commerce shopping cart, a Blog, and a Members' Area.

The advanced features are:

Main Menu

Here you can design the style of the main menu, which appears either along the top or down the side of every page and helps visitors find their way around the website.

Drop Down Menu

You can define the style of the drop-down menus (menus that appear when the mouse is moved over an item in the main menu).

Page Menu

You can define the style of the page menu. Page menus list the various pages in at particular level.

Styles and Models

You can define the style of the various pieces of text in the pages, of the ShowBox window linked to the Gallery Object, to the Tooltips which may be linked to the Link and the e-mails if you use the E-mail Form Object or you create a Shopping Cart.

Welcome Page

You can include a Welcome page, to introduce visitors to your website. The Welcome page may have a soundtrack and choices of other languages.

Advertising Message

You can set up and customize an advert to display only on the Home page or on all the website pages, in a specific position.

Blog

You can create and manage a Blog, which is like an online diary in which you publish your news and visitors can comment on it.

RSS Feed

You can create and manage an RSS feed, which is a useful instrument for maintaining an up-to-date news channel.

Data Management

Here you can indicate how data submission is to be handled in the various areas of the website where visitors can submit data: e-mails, the Blog, the Guestbook, the online shopping cart.

Access Management

You can create profiles for the visitors who will have access to Locked pages in the website, and you can organize them in groups. Locked pages, defined in Step 2 - Sitemap Creation, make up Members' Areas which need a login name to open them. According to each user profile, the credentials you specify determine which Locked pages in the Members' Area that user has access to.

Shopping Cart

You can create and manage an e-commerce shopping cart, defining product lists, shipping and payment methods, the layout of your order forms, etc.

For more information on creating the website Map and the difference between first and second level menus, drop-down menus and page menus, see Sitemap Creation.


Main Menu Style

Step 4 - Advanced Settings >

Main Menu Style

 Return to chapter overview
Show/Hide hidden text

In this window you can design the style of the buttons in the first level of the main menu.

Menus are created and updated automatically by the program according to the website's map designed in Step 2 - Sitemap Creation. The main menu displays the first level items of the website map that are used for the site's navigation menu. If you have chosen a menu structure with horizontal menus, the main menu appears immediately above or below the header on every page. If you have chosen a menu structure with vertical menus, the main menu is shown down the side of the pages, either on the left or the right of the page contents.

The commands for customizing menu buttons are organized in the following sections: General, Menu Items and 3D Style.

Click to expand/collapse Reference: Commands in the General section

You can use these commands for give some general settings for the main menu.

The options in the Style section are:

§Width: you can set the width in pixels of the buttons for the menu items.

§Margin: you can specify the horizontal and vertical margins in pixels (the space between the button border and the text in the button).

§Distance between Buttons: you can specify the outer margin in pixels (the space between each button).

§Enable Auto-scrolling: select this option if you want the navigation menu to scroll with the page contents, so that it is always visible.

When you define the width of the buttons, take into account the overall space available for this menu: this parameter can be changed if you are not using a default template (see Custom Template).

The options in the Text section are:

§Font Type: specifies the font, style and size to use for the text.

§Alignment: you can specify how you want the text to be aligned in the button: to the Left, in the Center or to the Right.

§Use Anti-alias text: select this option if you want smoother text edges.
Click to expand/collapse Reference: Commands in the Menu Items section

You can use the commands in this section to define colors, background images and text styles for the various states of the main menu buttons.

First of all, select the Menu Item you want to work on: you can define the style of the [image] Menu Item and [image] Item on mouseover/Current Page. You can select a menu element from the drop-down menu or you can work directly on the preview, which is kept constantly up-to-date with any changes you make.

The options in the Style section are available for all menu items:

§Background Color / Text Color / Border Color: you can define the color for the background, text and button border.

§Background Image: you can specify the image to use as a background for the button. Click on the [image] to browse through the available files (in .JPG, .GIF or .PNG format) to select an image. Or click on the arrow next to the field to open the button library and select the image you want to use from there.

§Font Style: this option defines the style of the button's text for the Menu Item item: it may be None, Inset, Raised, or Drop shadow. The Item on mouseover/Current Page item automatically assumes the setting defined for the Menu Item item: you can also add one of these styles: Normal, Bold, Italics, Bold Italics.
Click to expand/collapse Reference: Commands in the 3D Style section

You can use the commands in this section to define 3D-effect buttons.

The following options are available in the Shape section:

§Shape: choose a button shape from those available.

§Corner Radius: specify how accentuated the beveled corners of the buttons are to be (for shapes with rounded corners).

§Merge Button Shape: merge the buttons together so that the selected shape is applied to all of them.

The following options are available in the 3D Format section:

§Graphic: you can define the look of the button as Flat, Flat Pillow, Bevel, etc.

§Light Direction: you can define the direction of the light effect on the button.

§Gradient Factor: you can set the amount of shading for the button.

§Image Opacity: you can specify the degree of transparency of the images that are added to the buttons in the Menu Items section.

The 3D Border section has the following options:

§Border Style: you can define the button borders as Normal, Bevel or Inset.

§Outer Width / Inner Width: you can specify the outer and inner thickness of the button's border.

§Outer Border only: if you select this option, your preferences will be applied to the border surrounding all the buttons and not to just one single button.

Further information:

-

A website's navigation structure


Drop Down Menu Style

Step 4 - Advanced Settings >

Drop Down Menu Style

 Return to chapter overview
Show/Hide hidden text

The commands in this window are used to define the style of drop-down menus.

Menus are created and updated automatically by the program according to the website's map designed in Step 2 - Sitemap Creation. Drop-down menus are shown when the mouse passes over an item in the main menu.

The commands are organized in the following sections: General, Menu Items and 3D Style.

Click to expand/collapse Reference: Commands in the General section

You can use the commands in this section to give some general settings for drop-down menus.

You first have to indicate the Menu Type that you want, which may be:

Arrange in one column: all the items on the drop-down menu appear in a single column, one after the other.

Arrange in multiple columns: the items in the drop-down menu appear in several adjacent columns. A new column is added automatically when:

§the number of items in the menu reaches or is greater than the value of Max Items per Column;

§the page list has a separator in it (see Sitemap Creation).

If you have chosen a vertical menu in the Template selection or Custom Template window, you can also select:

Vertical Accordion: all the items in the drop-down menu appear in a single column: when you click on an item, all the items below move down to leave space to display a new list of previously-hidden items, that relate to the one you have selected.

When you have selected the Menu Type, you can work on the options in the Style section:

§Width: you can set the width in pixels of the buttons for the menu items.

§Margin: you can specify the horizontal and vertical margins in pixels (the space between the button border and the text in the button).

§Max Items per Column: this option is only available for the Arrange in multiple columns menu type. You can specify the maximum number of items for each column in the drop-down menu.

The options in the Text section are:

§Font Type: specifies the font, style and size to use for the text.

§Alignment: you can specify how you want the text to be aligned in the button: to the Left, in the Center or to the Right.

Finally, the Options section has these choices:

§Effect: you can specify the display effect for drop-down menus, choosing None, Fade, Drop Top, Drop Left or Drop Top Left.

§Automatically select the current Page: this option is only available for the Vertical Accordion menu type. the drop-down menu is automatically expanded and the page you are looking at is shown as selected in the menu.
Click to expand/collapse Reference: Commands in the Menu Items section

The commands in this section are for defining the colors, background images and text style of the various states of the buttons in drop-down menus.

First of all, you have to select the Menu Item to work on: you can specify the style of the [image] Menu Item, [image] Item on mouseover and [image] Separator. You can select a menu element from the drop-down menu or you can work directly on the preview, which is kept constantly up-to-date with any changes you make.

The options in the Style section are available for all the menu items:

§Background Color / Text Color / Border Color: you can define the color for the background, text and button border. The Separator item only has the Text Color option.

§Font Style: you can define the text style for the Item on mouseover and Separator items as Normal, Bold, Italics and Bold Italics.

§Background Image: this is only available for the Menu Item and Item on mouseover items, and you can specify the image to use as a background for the button. Click on the [image] to browse through the available files (in .JPG, .GIF or .PNG format) to select an image. Or click on the arrow next to the field to open the button library and select the image you want to use from there.

§Bullet Icon: you can specify the image to use as bullets for lists of buttons and separators. Click on the [image] and select a .JPG, .GIF or .PNG file.
Click to expand/collapse Reference: Commands in the 3D Style section

You can use the commands in this section to define 3D-effect buttons.

The following options are available in the Shape section:

§Shape: choose a button shape from those available.

§Corner Radius: specify how accentuated the beveled corners of the buttons are to be (for shapes with rounded corners).

§Merge Button Shape: merge the buttons together so that the selected shape is applied to all of them.

The following options are available in the 3D Format section:

§Graphic: you can define the look of the button as Flat, Flat Pillow, Bevel, etc.

§Light Direction: you can define the direction of the light effect on the button.

§Gradient Factor: you can set the amount of shading for the button.

§Image Opacity: you can specify the degree of transparency of the images that are added to the buttons in the Menu Items section.

The 3D Border section has the following options:

§Border Style: you can define the button borders as Normal, Bevel or Inset.

§Outer Width / Inner Width: you can specify the outer and inner thickness of the button's border.

§Outer Border only: if you select this option, your preferences will be applied to the border surrounding all the buttons and not to just one single button.

Further information:

-

A website's navigation structure


Page Menu Style

Step 4 - Advanced Settings >

Page Menu Style

 Return to chapter overview
Show/Hide hidden text

This window gives you the commands for defining some advanced settings for the buttons in page menus.

Menus are created and updated automatically by the program according to the website's map designed in Step 2 - Sitemap Creation. The page menus are optional, and they show a list of the pages in the current level. In other words, if you open a page in a level, and this contains other pages, the page menu shows the list of all the pages in that level. Page menus are always vertical, and may be displayed on the left or right of the page contents.

The commands for customizing buttons in the page menus are organized in the General and Menu Items sections.

Click to expand/collapse Reference: Commands in the General section

You can use the commands in this section to define some general settings for the page menu.

If you want to display a page menu that includes all the pages in the current level, you have to select the Show Page Menu option.

When you have done this, you can work on the options in the Style section:

§Menu Position: choose whether you want the page menu to be displayed on the left or right of the page.

§Width: you can set the width in pixels of the buttons for the menu items.

§Margin: you can specify the horizontal and vertical margins in pixels (the space between the button border and the text in the button).

§Distance between Buttons: you can set the value of the outer margin, in pixels (the space between one button and another).

The options in the Text section are:

§Font Type: specifies the font, style and size to use for the text.

§Alignment: you can specify how you want the text to be aligned in the button: to the Left, in the Center or to the Right.

Finally, in the Border section, you can create a border around the page menu (not the single buttons) and work on the following options:

§Thickness: the thickness of the borders (each one may be defined separately).

§Color: the color of the borders (again, each border can be colored separately).

§Rounded Corners: how rounded the corners are (each one can be defined separately).

§Drop Shadow: a shadow, specifying its color, position, diffusion and size.
Click to expand/collapse Reference: Commands in the Menu Items section

You can use the commands in this section to define the style of the items in the page menus.

First of all, select the Menu Item to work on: you can define the style of the [image] Menu Item, [image] Item on mouseover/Current Page, [image] Separator and [image] Separator Line. You can select a menu element from the drop-down menu or you can work directly on the preview, which is kept constantly up-to-date with any changes you make.

§Background Color / Text Color / Line Color: you can choose a color for the background and text of the Menu Item, Item on mouseover/Current Page and Separator, and the color of the line for the Separator Line.

§Bullet Icon: this option is for the Menu Item, Item on mouseover/Current Page and Separator items, and it lets you import a .JPG, .GIF or .PNG file containing the image to use as a bullet next to the items in the menu page.

§Font Style: this option is for the Item on mouseover/Current Page and Separator, and you can set the text as Normal, Bold, Italics or Bold Italics.

§Line Style: this option is only available for the Separator Line item, and it is used to define the line style, which may be Solid, Dash, Dot, Inset or Raised.

Further information:

-

A website's navigation structure


Styles and Models

Step 4 - Advanced Settings >

Styles and Models

 Return to chapter overview
Show/Hide hidden text

In this window, you can decide which styles to apply to the various text elements in the pages, in the ShowBox that is associated with elements such as the Gallery Object and Products List Object, in the Tooltips that can be associated with the Link and the e-mails that are created if you use the E-mail Form Object or if you set up a Shopping Cart.

A style can be generally defined as a series of indications for formatting text and graphics that are applied to an element to change its appearance. Using Styles and Models, you can include several different formats in a single operation.

The commands for defining your styles are organized in the following sections: Text, ShowBox, Tooltip and E-mail.

Click to expand/collapse Reference: Commands in the Text section

The commands in this section can be used to define the style of the various texts that appear in the website.

First of all, you have to choose the Page Item you want to define a style for. Select it from the drop-down menu or click on the preview.

The various page items you can apply a style to are:

Page Title: this is the title in the website pages. It is taken from the name given to the page when the website Map is created in the Sitemap Creation window, or, if otherwise specified, from the Extended Page Title in the Page Properties window.

Page Path: this is the text that appears immediately below the page title, and it shows the path to this page in the website ("breadcrumb navigation"). The Program adds the path automatically.

Page Text: this is the text of the single paragraphs that are added using the Text Object. The style indicated here is applied by default to text entered in the Text Object editor: you can use the commands provided by the editor to make changes. The default page text style is also applied to text that is added automatically by the Program, such as pages in the Members' Area, the Blog, the built-in search engine and the website Map.

Active Link / Mouseover Link / Visited Link: these options refer to hypertext links created with the Text Object. A link can change its appearance according to its state: active, on mouseover, already visited. Changing a link's style according to its current state helps the visitor to navigate the website, reminding him which parts he has already seen.

Field / Button: these are the fields and buttons that are created with the E-mail Form Object or the e-commerce shopping cart, as well as being elements of search fields (see Edit Graphic Template | Insert Search Field), the login/logout fields of the Members' Area, etc. When you create a new E-mail Form Object the fields in it take on the style defined here by default. You can subsequently change the style in the new e-mail form using the options in the E-mail Form Object | Style section.

Footer Menu: this menu repeats the items of the main menu and displays them at the bottom of every page.

If you select Page Item, you can work on the options in the Style section to change the style:

§Visible: you can decide whether the selected page item is to be visible or not. This option is not available for the Page Text or the various states of links, fields and buttons which cannot be invisible. Making an item invisible does not mean removing it from the page. It simply means that the item will not be visible when the page is published. You may want to make the Page Title invisible, for example, because you prefer to add a picture rather than text, but this does not mean the the <title> tag will be deleted from the HTML code.

§Background Color / Text Color: you can choose the color for the background and the text of the selected page item. You cannot choose a background color for the Page Text because this depends on the chosen template (see Template selection or Custom Template) and/or the Cell Style that the Text Object has.

§Font Type: specifies the font, style and size to use for the text.

§Alignment: you can decide how to align the element in the page: it can be Left, Center or Right. This option is not available for fields, buttons or links because hypertext link alignment is defined when the Text Object is created, regardless of the style.

§Text Style: this option is only available for the links in their various states (visited, etc) and it can be Normal or Underlined.

§Pointer: this option is available only for the Active Link, and it is automatically assumed by the other two link states. You can specify the style on mouseover. Click on [image] to select a .CUR or .ICO file to use.

§Border Color: you can specify the color of the borders that the Page Title, Page Path, Field, Button and Footer Menu can have.

§Rounded Corners: you can indicate how rounded the corners of the Field and Button are to be, and you can specify the value for each corner separately.

§Drop shadow: you can apply a shadow inside the Field, specifying its color, position, diffusion and size.

§Horizontal Margin: you can specify the horizontal margin of the Page Title, Page Path and Footer Menu.
Click to expand/collapse Reference: Commands in the ShowBox section

You can use the commands in this section to define the style of the ShowBox that is used in the galleries (see Gallery Object), in the ShowBox Gallery link (see Link | Action) and in the Products List Object. In all cases, the ShowBox opens on a link and displays an enlarged picture, a video or a slideshow: when a visitor clicks on the link to the ShowBox, the browser window is dimmed to highlight the ShowBox window, which is displayed in the foreground with the selected entry effect.

The options in the Style section are:

§Effect: you can specify the entry effect for the ShowBox window, which can be None, Fade, Move from Top, Zoom, Zoom and Hide the start Image. The Zoom and Zoom and Hide the start Image effects are very similar: the difference is that the original picture either remains visible or is hidden when it is enlarged. The Zoom and Hide the start Image effect is, therefore, particularly suitable when pictures are displayed in the ShowBox, rather than text.

§Outer Color / Inner Color: you can choose the color for the background in the area outside/inside the ShowBox. The color of the outer background is semi-transparent (according to the Background Opacity) settings), and is used to dim the browser window underneath.

§Background Opacity: you can specify the transparency for the outer background. Higher values lessen the visibility of the browser window underneath.

The options for the Text are:

§Text Color: you can choose the color for the text in the ShowBox window.

§Font Type: specifies the font, style and size to use for the text.

§Alignment: this indicates how the text is to aligned in the ShowBox window: to the Left, in the Center, or to the Right.

The following options are available for the Border:

§Thickness: the thickness of the borders (each one may be defined separately).

§Color: the color of the borders (again, each border can be colored separately).

§Rounded Corners: how rounded the corners are (each one can be defined separately).

§Drop Shadow: a shadow, specifying its color, position, diffusion and size.
Click to expand/collapse Reference: Commands in the Tooltip section

The commands in this section are used to define the style of the Tooltips that are associated with links that are added to text and images with the Inserisci collegamento Link command. A Tooltip is a short text that appears in a balloon when the mouse passes over a link: it should explain what will happen the the link is clicked.

You can start defining Tooltips with the options in the Style section:

§Tooltip Position: choose whether you want the Tooltip to be displayed on the Left, Right, Top or Bottom of the link.

§Effect: you can specify an entry effect for the Tooltip, which can be None, Fade or Alternate.

§Background Color: you can choose the color for the Tooltip background.

§Background Opacity: you can specify the transparency for the outer background. Higher values lessen the visibility of the browser window underneath.

§Show Tail: you can add an arrow to the balloon that points towards the link that the Tooltip refers to.

The options for the Text are:

§Text Color: you can choose a color for the text of the Tooltip.

§Font Type: specifies the font, style and size to use for the text.

§Alignment: this indicates how the text is to aligned in the Tooltip: to the Left, in the Center, or to the Right.

The options for the Border are:

§Thickness: the thickness of the borders (each one may be defined separately).

§Color: the color of the borders (again, each border can be colored separately).

§Rounded Corners: how rounded the corners are (each one can be defined separately).

§Drop Shadow: a shadow, specifying its color, position, diffusion and size.

The style settings are valid for the entire project, and so all the Tooltips will look the same. The contents of a Tooltip (text and images) are defined in the Link | Description window.
Click to expand/collapse Reference: Commands in the E-mail section

The commands in this section are for defining the style of the e-mails created in the E-mail Form Object or Shopping Cart.

First of all, you have to select the E-mail Item you want to define a style for, selecting it from the drop-down menu or clicking on it in the preview.

The elements of an e-mail that you can define styles for are:

E-mail Layout: the e-mails created by the Program all have an identical layout: a outer background with a central area for the message. You can include a border around the central area to visually separate the message from the background.

Image/Company Logo: you can add an image to the e-mail header. This could be a company logo, a banner, etc.

Message Content: this is the central area of the e-mail, where the message is written.

Footer Note: this is the text that ends the e-mail. It is normally a standard text and has different styles to differentiate it from the main message.

The options for each E-mail Item are shown in the Style section:

E-mail Layout

§Background Color: you can choose the color for the e-mail background.

§Border Color / Thickness: you can define the color and thickness of the border that separates the main central area from the background.

Image/Company Logo

§Image File: you can choose a picture to add to the e-mail header. Click on [image] to select the .JPG, .GIF or .PNG file to import.

§Alignment: you can choose how the picture is to be aligned in the header: Left, Center or Right.

§Position: you can indicate whether you want the picture placed Inside the frame or Outside the frame of the main area.

§Width: the width of the original picture is shown automatically, and you can modify it. The maximum width is 700 pixels, and depends on the e-mail layout. This parameter ensures that e-mails are always displayed correctly for all recipients.

Message Content

§Background Color: you can select the background color of the message text.

§Text Color: you can choose the color for the message text.

§Font Type: specifies the font, style and size to use for the text.

Footer Note

§Background Color: you can select the background color for the text in the closing notes.

§Text Color: you can specify the color of the text in the closing notes.

§Font Type: specifies the font, style and size to use for the text.

§Alignment: you can specify how the notes in the footer are to be aligned: Left, Center or Right.

§Position: you can whether you want the closing notes to be placed Inside the frame or Outside the frame of the main area.

§Text: you can write the text of the closing notes. A default text on the confidential nature of the e-mail is available.


Welcome Page

Step 4 - Advanced Settings >

Welcome Page

 Return to chapter overview
Show/Hide hidden text

In this window you can create a Welcome page for your website, and offer a number of languages that visitors can choose from to consult the website in.

As the name suggests, the Welcome page is a sort of front cover to the website: it may have a picture, Flash animation or a video in it and it is usually displayed for a set amount of time before the Home page is shown. Sometimes the visitor has to click in order to pass on to the Home page (with a message such as "skip intro). If the website is available in more than one language, the choice of languages is sometimes offered on this page.

Click to expand/collapse Reference: Commands for setting up a Welcome page

Not every website has a Welcome page. If you do want to include one in your website, select the Show the Welcome Page option. Remember that if you do have a Welcome page, it is always the first page to be displayed.

You can specify the contents and background, and add a soundtrack if you want.

The options for the Page Contents are:

§Type: you can specify what sort of content to add to your Welcome page. Contents can be an Image, Flash animation, Video and HTML code.

§File: if you choose an Image, Flash animation or Video as the content Type, you need to import the graphic file for the image (in .JPG, .GIF or .PNG format), the Flash animation file (in .SWF format) or the video file (in .FLV, .MP4, .WEBM or .OGG format) to use.

§HTML Code: if you choose HTML code as the content Type, you enter the code here. The toolbar contains these tools:

Cut [CTRL+X] - Copy [CTRL+C] - Paste [CTRL+V]

These options cut, copy and paste the selected text.

Undo [CTRL+Z] - Redo [ALT+CAPS+BACKSPACE]

These commands undo/restore the last operation to be carried out/undone.

Insert Widgets

This option inserts the code of the selected widget: click on the arrow next to the button to display the complete list of available widgets, as they appear in the HTML and Widgets Object. Click on the widget you want to open the Widget window, where you can set the necessary parameters. When you confirm, the HTML code for the widget is composed and automatically added in the editor.

§Size: you can specify the width and height of the Image, Flash animation, Video or HTML code in pixels. Leave the Keep Ratio selected to keep the ratio between width and height.

The following options are available for the Page Background:

§Background Color: you can specify the color of the Welcome page's background.

§Image File: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background.

§Repeat: indicates whether the page background image is to be repeated, or not. It can be repeated horizontally, vertically or in both directions so that it occupies all the available space. The background image can also be resized so that it adapts to the available space.

§Alignment: you can specify how the image is to be aligned in the browser window.

These Options are also available:

§Entrance Sound: you can indicate the audio file (in .MP3 format) to be used as background music when the Welcome page is displayed.

§Jump to Home Page after [sec]: you can specify the number of seconds the Welcome page is to be displayed for, after which the Home page appears automatically.
Click to expand/collapse Reference: Commands for the choice of language

If your website is available in more than one language and you want visitors to be able to choose the language from the Welcome page, select the Show links to other Languages option.

Compile the list of languages you intend offering in the Language List. There are five languages in the list by default: you can use the following commands to change the list:

§Add... / Remove: you can add a language to the list in the Language Settings window, or delete a language from the list.

§Move up / Move down: you can change the order of the languages in the list, moving the selected language up or down to a new position.

§Current: you can set one of the languages in the Language List as the "default" language. This is the language that is used for the website when it is opened. The Welcome page only appears on the website in the default language (for more information, see How to create a multi-language website).

§Edit...: this opens the Language Settings where you can change the settings for the language selected from the Language List.

This option is also available:

§Execute the link in a new Window: if you select this option, the website is opened in a new browser window, and not in the window displaying the Welcome page.

Although we have talked mainly about language choices in the Welcome page, there are other features that you can include here. You could, for example, offer choices of "HTML version / Flash version" or "Contents suitable for everybody / Adults only".

If you include a Welcome page in your website, the special "Welcome Page" page is added automatically to the website Map. Select it and open the Page Properties window to define the main characteristics.

Best practices:

- | How to translate automatic text
- | How to create a multi-language website


The Language Settings window

Language Settings

Step 4 - Advanced Settings > Welcome Page >

Language Settings

 Return to chapter overview

This window opens when you click on the Add... or Edit... buttons on the Welcome Page window, and you can specify various parameters for the languages available for your website.

The options are:

§Language name to show: you can enter the name of the language you want to make available. Click on the arrow next to the field to open a popup menu showing a list of possible languages, and select the one you want to add. You can also type the name of the language directly in the field.

§Image file for this language (eg.: flag): you can specify the name of the graphic file to use to create the button for the language. Click on [image] to select the .JPG, .GIF or .PNG file to use to create a button with the image of the flag that represents the language, for example.

If you don't associate any image with the button, a text link will be created automatically, using the Language name to show as the text.

§Link for this Language (ie: show the WebSite in this language): you can create a link on the image that you import using the Image file for this language (eg.: flag) option. Click on the [image] button to open the Link window where you can select the action and relative options.

If, for example, the website in the language indicated by the flag has already been published, you can select the File or URL option and enter the URL (website address) to link up to it (e.g. http://www.mywebsite.com/en/index.html). If you are working on the default language, you cannot use this option because it is automatically linked to the Home page of the current website.

Notes on compatibility with the previous versions:

The Language Settings window has been changed in the following way in version 10:

§The Server path or URL of the website for this language option has been replaced with the Link for this Language (ie: show the WebSite in this language) option. You can still set up a link to the file or URL, but you can also give other indications.

§The Show this language but advise that it is not available yet option has been removed because now you can create a custom message, setting up the most suitable link on the flag button.

Best practices:

- | How to translate automatic text
- | How to create a multi-language website


Advertising Message

Step 4 - Advanced Settings >

Advertising Message

 Return to chapter overview
Show/Hide hidden text

This window shows the commands for including an advertisement either just on the Home page, or on all of the pages in your website.

The advert can be an image or a Flash animation, displayed in a specific position on the page, and which has a link to a "Landing page". A landing page is a normal website page, but you have to study its contents carefully as it is supposed to convey a specific message to visitors, encouraging them to fill in a form, make a purchase, etc.

Click to expand/collapse Reference: Commands for including advertisements

If you want to add an advert, you must first select the Show the Advertising Message option.

You can choose the Message Type from the following items:

Show ads on the top right corner: this advert is often called a "Pagepeel": with the mouse in the top right corner of the window, the corner is "peeled" down to show the advert underneath.

Show ads in a box: this advert is shown in a box in a specific position on the page, in the foreground over the page contents.

Show ads in a horizontal bar: the advert is displayed as a banner along the top of the browser window, above the contents of the page, or at the bottom of the window superimposed over the page contents.

The Settings section proposes the following option for each Message Type:

§Image File: you can specify the graphic file (in .JPG, .GIF or .PNG format) or the Flash animation file (in .SWF format) containing the advert you want to add.

For the Show ads on the top right corner item, you can also choose the following options:

§Style: you can choose the classic pagepeel, or another effect. All the effects work in the same way: the advert underneath is shown on mouseover.

§Width/Height: you can specify the width and height in pixels of the space dedicated to the advert.

The following options are also available for the Show ads in a box item:

§Position: you can specify where the advert is to be displayed in the browser window. The choices are Center, Top left, Top right, Bottom left and Bottom right.

§Effect: you can define an effect to apply when the advert appears. it can be Fade, Wipe Down, Wipe Up, Wipe Right or Wipe Left.

§Show this message only once: if you select this option, the advertisement is only displayed once, when the page is opened for the first time (the next time the website is visited, the advertisement will be shown again).

Other options for Show ads in a horizontal bar are:

§Position: you can specify whether the advert's banner is to be displayed at the top of the page, before the contents, or at the bottom of the page, superimposed on the contents.

§Background Color: you can choose the color for the banner's background.

§Show this message only once: if you select this option, the advertisement is only displayed once, when the page is opened for the first time (the next time the website is visited, the advertisement will be shown again).

These Options are for all advert types:

§Link: you can specify the link (usually to the Landing Page) that is to be activated when a visitor clicks on the advertisement. Click on the [image] button to open the Link window where you can select the action and relative options.

§Entrance Sound: you can import an audio file (in .MP3 format) that you want to be played when the advert is on view.

What is a Landing page?

The Landing Page is the page a visitor "lands on" after clicking on a link or an advertising banner. It must be created so that the visitor immediately finds the information he wants, without having to navigate elsewhere in the website.

This concept can best be explained with an example: you decide to publish a banner to advertise the sale of a particular article. Only the essential information is given in the banner, but it is enough to arouse visitor's interest. Taking him to the website's Home page would be counter-productive because it is too general and he would waste time navigating through the website to find more information on that particular article he has become interested in. You risk losing a potential customer! So, the best thing is to create a new page with a simple layout that gives all the necessary information on the advertised article, including how to buy it.

You usually have to create a specific Landing page but, if it is well done, it is worth the trouble because it guides the visitor to the objective of the banner (that of making a purchase, in this vase).

These options are available in the Display Mode section:

§Show on Home Page Only / Show on all Pages: you can choose whether the advert is to be displayed on all the pages in the website or only on the Home page.

Best practices:

-

How to include adverts in your website


Blog

Step 4 - Advanced Settings >

Blog

 Return to chapter overview
Show/Hide hidden text

Here you will find all the tools and options necessary for setting up a Blog and organizing comments that visitors may make on what you publish.

A Blog is like an online diary. The author writes about what he wants in Posts (articles), which he publishes more or less regularly.

Once it has been published, a WebSite X5 Blog is a separate entity of the main website, and it is automatically added to the website Map in the Special pages folder (see Sitemap Creation). If you want to add the "Blog" item to the navigation menu, you will have to create an Alias for the Special page, by selecting it and dragging it to the Menu folder.

Because it is a part of the website, the Blog has the same graphics and the website's template is applied automatically to it.

Your Blog is published at the http://www.mywebsite.com/blog URL where http://www.mywebsite.com is that of the website with which the Blog is associated (your website).

The Blog's main page lists all the posts that you have published, in chronological order. For each Post, the list gives the title, author, category, date and time of publishing and, if only a summary is displayed, an extract of the Posts is displayed with a link to "Read all". The "Read all" link opens the specific Post in a new page, and the entire article is displayed. Any comments that have been made are also shown, and new comments can be added.

Apart from the contents of the Posts, all the pages in a Blog have the same structure: there is a column on the right side of the page that shows tools such as Recent Posts, Monthly/category archive and Clouds. You can customize this column and decide which tools to make available to visitors, and in which order they appear in the column.

The possibility to receive comments on your Posts from visitors is a great way to develop an on-going discussion between readers and writers. To avoid abusive, irrelevant or otherwise inappropriate comments from being published, WebSite X5 provides you with an online Control Panel through which undesirable comments can be intercepted.

To create a Blog, all you have to do is define a few general parameters and create the list of news items that you want to publish.

Once you have started publishing your Blog, you will need to keep visitors interested by publishing new Posts with a certain regularity. To save time when uploading your project to the Internet, you can choose to publish only the updates to your Blog by selecting the Export only Blog and RSS Feed option in the Website Export to Internet window.

The commands for setting up a Blog and writing Posts are organized in the Posts, Layout and Comments sections.

Click to expand/collapse Reference: Commands in the Posts section

You can use the commands in this section to define some general parameters and start creating the list of Posts to publish in your Blog.

You have these options in the General Settings section:

§Title: enter the title that you want to give to your Blog in this field. The title is displayed in the browser's title bar and is, obviously, an important element as it helps visitors and search engines to correctly identify the Blog.

If you don't give your Blog a title, the title of the website is used by default (you specify this in the General Settings | Basic window.

§Description: write a brief description of the Blog in this field. Be brief but clear and to the point: this description is used in the HTML code as the contents of the <description> meta tag, and it will be used by search engine spiders to identify your Blog.

If you don't enter a description for your Blog, the description of the website, given in the General Settings | Basic window, will be used.

§Create RSS Feed including the Blog contents: this option is active by default, and means that an RSS Feed will be created automatically with all the Blog's Posts. The path for the Blog's RSS feeds is http://www.mywebsite.com/blog/x5feed.xml where http://www.mywebsite.com is the URL of the website with which the Blog is associated (your website).

The Post List section shows a table summarizing the Title, Author, Category and Date of publishing for each Post, and the commands for creating new Posts and organizing existing ones:

§Add...: this opens the Post Setting window, where you can add a new Post.

§Remove: this deletes the selected Post from the Post List.

§Edit...: this opens the Post Setting window where you can edit the Post selected from the Post List.
Click to expand/collapse Reference: Commands in the Layout section

The commands in this section define the appearance of your Blog.

The following options are available in the General Settings section:

§Posts View Mode: you can choose how your Posts are displayed in the first page of your Blog. You can have the first Post displayed in full, followed by a summary of all the others, or you can have a summary of all the Posts. Summaries have the "Read all" link associated with them.

§Show the 'AddThis' Button to share your Website with Social Networks.: if you select this option, the "AddThis" button is added automatically to every Post in your blog. When a visitor clicks on this button a submenu is displayed with a list of the most common social networks. If the visitor is already a member of one of these networks, he can select it and share the link to the Post with his contacts.

§Button Type: you can select the graphics for the "AddThis" button from those available in the menu.

§AddThis Account: if you have an AddThis account, you can specify it. If you have this account, you can view the statistics on how visitors are using the AddThis service.

For more information on the AddThis service, and how to open an account, click on the [image] button to access the official www.addthis.com website.

The Side Blocks section gives a summary of the Title, Type and Width of the blocks in the side toolbar, and the commands for creating the block list:

§Add...: this opens the Side Block where you can add a new block.

§Duplicate: you can copy the selected block.

§Remove: you can delete a block from the list of Side Blocks.

§Move up / Move down: you can move the selected block up or down in the Side Blocks list.

§Edit...: this opens the Side Block window, where you can edit the block selected from the Side Blocks list.
Click to expand/collapse Reference: Commands in the Comments section

You can use the commands in this section to organize comments made by visitors as feedback to your Posts in the Blog.

First of all, you have to select the Let readers add Comments to your Blog option so that visitors can make comments on your Posts.

Then you have to specify the Content Type, choosing from:

Comment and Vote: visitors can write a comment and vote the website.

Comment: visitors can write a comment, but they can't vote.

Vote: visitors can vote, but they can't write a comment.

The options in the Comments Settings section are:

§View Mode: you can decide whether comments made by visitors are to be pulished immediately online, or whether they are to be approved first, using the commands in the online control panel.

§View Order: you can define the chronological order to the published comments, from the most recent to the earliest, or vice versa.

§Show 'Abuse' button: select this option is you want an "Abuse" button added, so that visitors can report objectionable conduct.

§Enable 'Captcha' anti-spam filter: you can add the Captcha anti-spam filter to the end of the comment form. A series of distorted letters is shown in random order and visitors must copy them correctly in a field in order to submit their comment.

§Vote Style: select this option to define the style of the element that visitors can vote (for example, 5 stars). This is the only option available if you select Vote as Content Type.

You can indicate how data submitted in the comments form is to be saved and handled by the website administrator in the Data Save Settings section:

§Subfolder on the Server where to save data: specify the folder on the server (with PHP write access) in which the submitted data is to be saved. The main server folder name is specified by the Server folder with write access option in the Data Management window. If you do not specify a sub-folder, the data will be saved in this one.

§Send an e-mail to notify the comment has been received: a notification e-mail will be sent automatically when new data arrive.

§User e-mail address: You have to set a number of parameters for each send option:

enter the recipient address of the e-mail notifying data reception.

Providers usually give write access to all folders on the server: if this is the case, you don't need to give the pathname of the public folder. In all other cases, contact your webspace provider for the complete public folder pathname.

You can check in the WebSite Test section of the online control panel whether the folder with write access, and any sub-folders inside i, actually exist and, if so, if you have write access to them (so that you can save the data).

When you create a Blog, a Special page is automatically created in the Map and it is labeled "Blog": select it and open the Page Properties window to define its main characteristics.

Best practices:

-

How to organize Blog and Guestbook comments in the online Control Panel

Further information:

- | Blogs: their characteristics and how they work
- | Online Control Panel


The Post Setting window

Blog | Post Setting

Step 4 - Advanced Settings > Blog >

Blog | Post Setting

 Return to chapter overview
Show/Hide hidden text

The Post Setting window, opened by the Add... or Edit... commands in the Blog | Posts window, are for creating or editing a Post in the Blog.

This window has two sections: Basic and Expert.

Click to expand/collapse Reference: Commands in the Basic section

The commands in this section are:

§Title: you can give the Post a title.

§Publication Date: you can select the post's publication date from a calendar.

§Author: you can name the Post's author, typing the name in the field or selecting it from the list.

§Category: you can choose a category for the Post. As for the Author field, you can type the name of a new category or select one from the list.

§Tag: you can enter a list of tags, which are brief descriptions of the main contents of a Post. You can associate several tags with a Post, writing one after the other and separating them by commas (e.g. "tag1, tag2, tag3, ...").

§Content: you can write your Post in an editor which is the same as the one for the Text Object.

§Caption: you can write a brief description of the Post.
Click to expand/collapse Reference: Commands in the Expert section

The commands in this section are:

§Linked Video/Audio: you can specify an audio file (in .MP3, .WMA, .WAV, .MID, .AIF or .M4A format) or a video file (in .MP4, .FLV, .AVI, .WMV, .MPG or .MOV format) to associate with the Post. When you select this option, a link to the audio/video file is created automatically at the end of the Post.

Videos can be played directly from a Post if you manually insert the HTML code when you write the text of the Post with the editor.

For example, you can copy the code of a YouTube™ video and paste it into the Post text as it is.

§Post Sources: you can create a list of sources used to write your Post using the following commands:

-Add... / Remove: you can add a new source or delete the selected one.

-Move up / Move down: you can select a source and move it to a different position in the list.

-Edit: you can edit the selected source. You can also click twice on a source to edit it. To enter a source correctly, write the name of the website followed by its URL between the < > characters (for example "WebSite X5 <http://www.websitex5.com>"): the text will be displayed as the source and the URL will be used to create a link to it.

§Do not allow users to add comments to the Post: if you select this option, visitors will not be able to make comments on the current Post.

Best practices:

-

How to organize Blog and Guestbook comments in the online Control Panel

Further information:

- | Blogs: their characteristics and how they work
- | The online Control Panel


The Side Block window

Blog | Side Block

Step 4 - Advanced Settings > Blog >

Blog | Side Block

 Return to chapter overview
Show/Hide hidden text

The Side Block window opens from the Add and Edit commands in the Blog | Layout window, and you can start defining the blocks, that contain useful tools for visitors, in the column on the right of every page in the Blog.

This window has the General and Style sections.

Click to expand/collapse Reference: Commands in the General section

Use the commands in this section to create the list of blocks that complete your Blog page.

There are different kinds of blocks to choose from:

Recent Posts: This block displays all the recent Posts that have been published in the Blog. A visitor clicks on a title to go to the Post.

Categories: This block contains a list of the categories in which you have organized your Posts. A visitor clicks on a category to display the list of Posts in it.

Monthly Posts: This block contains the list of Posts that have been published each month.

Clouds: This block contains the list of categories or tags associated with the published Posts. The names of the categories and tags are written in different font sizes, depending on how many Posts are associated with them: the bigger the font, the more Posts there are. A visitor clicks on a category or tag to see the list of Posts associated with it.

Blogroll: This block displays the list of websites or Blogs that you think may be of interest to your visitors.

Facebook: This block uses Facebook's "I like" plug-in. Visitors can:

§see how many people and/or their friends like the proposed Facebook page;

§read the Posts published recently on the proposed Facebook page;

§say they like the proposed Facebook page without actually having to visit it.

Google AdSense Adverts: This block is for displaying adverts that are part of the Google AdSense™ circuit.

HTML Code: This block is free for you to customize as you like. You can add any feature that the Program does not add automatically.

The available options depend on the type of block. The following options are available for all types:

§Title: you can specify the title of the block.

§Width: you can specify the width in pixels of the block.

The following options are specific for the block type:

Recent Posts / Categories /

Monthly Posts:

§Max Items Number: you can specify the maximum number of items that can be displayed in the block.

Clouds:

§Show Categories in a Cloud / Show Tags in a Cloud: you can specify whether the Clouds block shows the categories or the tags for the Posts that have already been published.

Blogroll:

§Blogroll List: you can compile the list of friendly websites with these commands:

-Add / Remove: to add a new friendly website, or delete the selected one.

-Move up / Move down: you can change the order of the list, moving the selected item up or down to a different position.

-Edit: you can edit the selected item. You can also click twice on an item to edit it.

To enter a friendly website correctly, write the name of the website followed by its URL between the < > characters (for example "WebSite X5 <http://www.websitex5.com>"): the text will be displayed as the friendly website source and the URL will be used to create a link to it.

Facebook:

§Facebook URL: you can specify the URL of the Facebook page you want to propose.

§Background Color: you can give the block a light or dark background.

§Height: you can set the block's height in pixels.

§Show Connections: select this option if you want friends' profile photos to be displayed (these are links to their Facebook page).

§Show Stream: select this option to display the latest Posts published on the wall of the proposed Facebook page in the block.

§Show FaceBook Header: select this option to display a Facebook header in the block.

Google AdSense Adverts:

§Google AdSense HTML Code: copy the HTML code from Google AdSense™ to display adverts in this block.

HTML Code:

§HTML Code: write or copy HTML code to create your own contents in this block.
Click to expand/collapse Reference: Commands in the Style section

You can use the commands in this section to define the appearance of the blocks in your Blog page..

The options for the Text are:

§Font Type: specifies the font, style and size to use for the text.

§Text Color: specifies the color to use for the text.

§Margin: sets the width of the margin in pixels (the space between the block's border and the text).

The options for the Background are:

§Background Color: indicates the color to use for the background.

§Image File: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background.

§Repeat: indicates whether the page background image is to be repeated, or not. It can be repeated horizontally, vertically or in both directions so that it occupies all the available space. The background image can also be resized so that it adapts to the available space.

§Alignment: specifies how the background image is to be aligned in the block.

The options for the Border are:

§Thickness: the thickness of the borders (each one may be defined separately).

§Color: the color of the borders (again, each border can be colored separately).

§Rounded Corners: how rounded the corners are (each one can be defined separately).

§Drop Shadow: a shadow, specifying its color, position, diffusion and size.

Best practices:

-

How to organize Blog and Guestbook comments in the online Control Panel

Further information:

- | Blogs: their characteristics and how they work
- | The online Control Panel


RSS Feed

Step 4 - Advanced Settings >

RSS Feed

 Return to chapter overview
Show/Hide hidden text

This window proposes the tools and options for creating an RSS feed, which is one of the most popular formats for broadcasting web content.

An RSS feed is a very versatile instrument for broadcasting news, pictures or videos. It is useful for broadcasting news on a regular basis, or to publicize events, updates to a website, new Posts or comments on a Blog.

Visitors who subscribe to the RSS feed on a website will receive constant updates and news through their news reader program.

Click to expand/collapse Reference: Commands for creating an RSS feed

To create an RSS feed, you need to specify a few general parameters and create the list of news articles you want to broadcast.

The Post List shows a table that summarizes the existing articles, giving their Title and the Date they were published. The commands for working on the Post list are:

§Add...: this opens the Post Setting window where you can add a new Post.

§Remove: you can delete a Post from the Post List.

§Edit...: this opens the Post Setting window where you can edit the Post selected from the Post List.

As well as creating the Post list, you also have to define the following General Settings:

§Title: (mandatory parameter) to give the title of the RSS feed associated with the website.

§Image: you can specify an image (using a file in .JPG, .GIF or .PNG format) to associate with the RSS feed: this image (typically a company or website logo) will be displayed by the news reader program.

§Description: (mandatory parameter) to give a description of the RSS feed associated with the website.

When you test your website, a message appears to remind you that RSS feeds will only be displayed when the website has been published on the Internet.

Further information:

-

RSS feeds: definitions and uses


The Post Setting window

RSS Feed | Post Setting

Step 4 - Advanced Settings > RSS Feed >

RSS Feed | Post Setting

 Return to chapter overview

The Post Setting window is opened by the Add... and Edit... commands in the RSS Feed window, and you can create or edit an RSS feed Post.

§Title: you can give the Post a title.

§Publication Date: you can select the post's publication date from a calendar.

§Content: you can write your Post in an editor which is the same as the one for the Text Object.

§Linked Page: you can specify the page to associate with the Post in the website map.

Further information:

-

RSS feeds: definitions and uses


Data Management

Step 4 - Advanced Settings >

Data Management

 Return to chapter overview
Show/Hide hidden text

In this window, you can define how submitted data is to be treated. You may receive such data from E-mail forms, your Blog, the Guestbook.

You can use the commands in the Database section to create a list of the databases linked to your website project, to make data management easier. All the databases that you include are shown in a table that gives their Description, Database Name, Host Name and Username.

Click to expand/collapse Reference: Commands for creating the list of databases

The commands for creating the list of databases that are linked to the current project are:

§Add...: this opens the Database Settings window, where you can add a new database.

§Remove: you can delete the selected database from the list.

§Edit...: this opens the Database Settings window, where you can edit the data in the selected database. You can also click twice on a database name to edit it.

You must create the list of databases linked to the project before you can use a database to store data that is submitted via an E-mail Form Object.
Click to expand/collapse Reference: Options for sending e-mails and saving data on the server

You can use the options in the Sending E-mail section to indicate how e-mails are to be sent:

§E-mail form script type: you can specify the script to be used for e-mails sent by WebSite X5, for example in the E-mail form object or in the e-commerce shopping cart. The complete script is used by default: if this script does not work with the server's configuration, replace it and set the server options to low quality or low-level script.

§E-mail form data submission type: this option defines how data for the E-mail form object is to be sent. The POST method is used by default, but as some servers may not be able to support it, it is possible to use the GET method.

The HTTP protocol (Hypertext Transfer Protocol) is the most common method adopted for transmitting information on the Internet. This protocol works on a request/reply basis: the client sends a request and the server sends a reply. The client is usually a browser and the server is that of the website.

The HTTP request/reply messages have their own syntax. Request messages must specify the send method: the most common ones are POST and GET.

The GET method is used to use the contents of the indicated resource as the subject of the request (for example, the requested web page).

The POST method is used to send information to to the server (for example, data in a form).

It is more correct to use the POST method for e-mails but, if this is not supported by the server, then WebSite X5 allows you to use the GET method instead.

You can also specify the Writing Access Folder:

§Server folder with write access: enter the path on the server for the folder with write access (where the PHP script can write to).

Providers usually give write access to all folders on the server: if this is the case, you don't need to give the pathname of the public folder. In all other cases, contact your webspace provider for the complete public folder pathname.

You can check in the WebSite Test section of the online control panel whether the folder with write access, and any sub-folders inside i, actually exist and, if so, if you have write access to them (so that you can save the data).


The Database Settings window

Database Settings

Step 4 - Advanced Settings > Data Management >

Database Settings

 Return to chapter overview

This window opens from the Add... command in the Data Management window, and you can define settings for a new database to link to the current project.

The Database Settings that you need to specify are:

§Description: give the database a name so that you can identify it more easily.

§Host Name: enter the URL address of the SQL server where the database is stored online. The database is usually stored on the same server which hosts the website it is linked to, and so "localhost" is often used. Check with your provider that the database and website are on the same server.

§Database Name: enter the name of the database you want to work on (you can obtain this from your provider).

§Username: enter the username (that your provider gives you) needed to access the online database.

§Password: enter the password (that your provider gives you) needed to access the online database.


Access Management

Step 4 - Advanced Settings >

Access Management

 Return to chapter overview
Show/Hide hidden text

This window contains the commands for creating and managing the profile of users who have access to your website's Members' Area. Pages in the Members' Area are defined as Locked Pages when you are working on Sitemap Creation.

Click to expand/collapse Reference: Commands for creating user profiles

In the Groups and Users who can access to the Locked Pages section, you will see a table with a list of groups/users for whom a profile has already been created, and the login name and notes for each user.

The commands for creating the list of groups and users with access to locked pages are shown next to the table:

§New Group: you can create a new group: if you organize similar users in groups they are easier to manage. Groups don't have any particular settings: they are simply "containers" and are added directly to the table. Double-click on a group if you want to change its name.

You may sometimes find it easier to organize users if you further divide them into sub-groups. There is no limit to the number of groups and sub-groups you create.

Two groups are present in the list by default: Administrators and Users. The Administrators group include the website Administrators and they have access to all the Locked pages in your website.

All the users in the Administrators group can use their login and password to access the online Control Panel (which is at the URL http://www.mywebsite.com/admin where http://www.mywebsite.com is the website's URL) Here they can organize comments on Posts in the Blog, the messages left in the Guestbook and view diagnostic information.

§New User: this command opens the User Settings window where you can add a new user to the selected group and give him a login and password.

§Create Alias: you can create an Alias for the selected user. This option is useful when a user has to be added to more than one group, to have access to different locked pages. This option is not available for users in the Administrators group because they have access to all locked pages. The Alias remains associated with the user so any changes made to one are automatically applied to the other. You can also create an Alias by selecting a user in a group and dragging the name to another group. Before releasing the mouse button to drop the name into the second group, press the CTRL key.

§Remove: you can remove the selected group or user. You cannot remove the Administrators group,or the Admin user in it.

§Edit...: this command opens the User Settings window where you can change the settings for the selected user.

When you have created the users with their logins and passwords, and organized them in groups, you can go back to Step 2 - Sitemap Creation to define the pages to be locked and indicate which groups/users can access each one.
Click to expand/collapse Reference: Options for access management

The following options are available in the Login and Password Page settings section:

§Welcome message: you can write a message that will be displayed when a user tries to access a locked page without logging in first. The user will be re-directed to a page that the Program creates automatically and that contains the following:

-the welcome message that you define here;

-the login and password fields;

-the Register button, if you include a Registration Page (see below).

§Registration Page: this option takes you to the website Map and you can specify which page is to be displayed when the user clicks on the Register link to enter his login and password for accessing locked pages.

When you define even just one page as Locked (thus setting up a Members' Area) a special page called "Login Page " is created automatically in the Map and you can select it and use the options in the Page Properties window to define its main characteristics.

When you test your website offline, a warning message will tell you that the locked pages will be displayed without requesting access. The Members' Area will be fully operational only when the website is published on the server.

In order for the Members' Area to work correctly, the host server must support the PHP language and sessions. You can obtain this information on server diagnostics in the Website Test section of the online Control Panel.

Best practices:

-

How to create a Members' Area and control access

Further information:

-

The online Control Panel


The User Settings window

User Settings

Step 4 - Advanced Settings > Access Management >

User Settings

 Return to chapter overview

The User Settings window opens when you select the New User or Edit... commands in the Access Management window, and you can set the login and password for a new user.

The commands for creating a new user are:

§First and Last Name: enter the name of user who is to have access to certain Locked Pages in the website.

§Username / Password: enter a login name and password for the new user which he will use to access the Locked Pages to which he has access. A password of 8 characters is generated automatically: it can be changed.

§Entrance Page: this option takes you to the website Map and you can specify the page to be displayed after the user has given his login and password.

§Note: this is an optional field: you can add notes on the user.

§Registration Date: a calendar is displayed so you can indicate the date the new user was registered.

The information in the Note and Registration Date options are not added to the website's code: their sole purpose is to facilitate the website Administrator's task of user management.

Best practices:

-

How to create a Members' Area and control accesses


Shopping Cart

Step 4 - Advanced Settings >

Shopping Cart

 Return to chapter overview
Show/Hide hidden text

This window contains the tools and options for creating and organizing an e-commerce shopping cart, where you can sell products on your website online.

The first thing to do when creating an e-commerce shopping cart is to define the product catalog, organizing the products into appropriate categories and sub-categories. You will need to enter some basic information for each product, such as its name, description and price. You can, however, add further details, for example photographs, variations of color, size and model, etc. When you have created your product catalog, you can specify shipping and payment methods and compose the order form, including e-mails that are sent by the shopping cart object to the website Administrator and the customers who place an order.

The options for defining the various elements in the e-commerce shopping cart, and how they work, are organized in the following sections: Products, Order Management, Customer Details, Send order and Options.

Click to expand/collapse Reference: Commands in the Products section

You can use the commands in this section to add products to the shopping cart, organizing them in categories.

All the products that have been added are listed in a table, in their categories. The table gives their Description and Price for each one.

The toolbar at the top of the table has the following commands:

Cut [CTRL+X] - Copy [CTRL+C] - Paste [CTRL+V]

These commands cut, copy and paste the selected products. The same commands are also available from the popup menu which you can display by clicking the righthand mouse button on the product list.

Expand / Collapse

You can expand and collapse the selected category to view/hide the products in it.

Import Products

You can import the list of products to add to the shopping cart directly from an external file (in .TXT or .CSV format from Microsoft Excel).

Export Products

You can export the product catalog to a .TXT or .CSV file.

For more information on the Import Products/Export Products features, and on how to create and organize files in the product catalog, see How to import/export products in the shopping cart.

The following commands are also available for creating the list of products in the online shopping cart:

§New Category: you can add a new category for the products. Categories don't have any particular settings: they are simply "containers" and are added directly to the table when they are created. You can double-click on a category in the table to rename it.

You can also create sub-categories. there are no limits to the number of categories and sub-categories you can add.

§New Product: this command opens the Product Settings window where you can add a new product to the selected category.

§Remove: you can delete the selected category and all the products in it, or you can select single products to delete.

§Edit...: this command opens the Product Settings window where you can change the settings for the selected product.

You can move a product to a different category from the product list: select it and drag & drop it to another category. Use the CTRL and SHIFT keys to make multiple selections.

When you have added the categories and products to the e-commerce shopping cart, you can use the Products List Object to create the online catalog.
Click to expand/collapse Reference: Commands in the Order Management section

You can use the commands in this section to define the shipping and payment methods for your online shopping cart.

The Shipping type List displays the shipping methods that have been added, and gives the Name, Description and Cost for each one.

The commands for creating the shipping type list are:

§Add...: this opens the Shipping Type window and you can define a new shipping method.

§Duplicate: you can make a copy of the selected shipping method, to use as the basis for defining a new one.

§Remove: you can delete the selected shipping method.

§Move up / Move down: you can change the order of the shipping methods in the list, moving the selected method up or down to a new position.

§Edit...: this command opens the Shipping Type and you can edit the selected shipping method. You can also do this by double-clicking on a type in the list.

The Payment type List is very similar to the shipping type list. It lists the payment methods that have been added and gives the Name, Description and Cost for each one.

The commands for creating the payment type list are identical to those for the shipping type list, but you also have two buttons, Add... and Edit... which open the Payment Type window.
Click to expand/collapse Reference: Commands in the Customer Details section

You can use the commands in this section to compose an order form for your shopping cart.

The Order Form section displays a Field List with all the fields that you can use in the order form: some fields are Presets and some are Custom, and the list indicates whether a field is Visible and/or Mandatory.

The commands in the button bar above the Field List are:

Add a custom Field

You can add a new Custom field to the order form.

Remove Field

You can delete the selected field. You cannot delete Presets fields.

Rename Field

You can change the name of the selected field. You cannot change the names of Presets fields.

Move Up / Move Down

You can change the position of the fields in the list, moving the selected field up or down. You can change the order of the Presets and Custom fields, but you cannot move the Custom fields to the list of Presets ones, or vice versa.

Visible Field

You can set the selected field as Visible/Invisible in the order form.

Mandatory Field

You can set the selected field as Mandatory/Optional in the order form. The customer has to fill in all the mandatory fields, in order to proceed with his order.

The list already contains all the fields that are usually used in an order form.

The "E-mail address" field is the only one that cannot be set as optional or hidden, because the customer's e-mail address is vital to the correct working of the shopping cart.

At the bottom of the Field List table there is this option:

§Show Shipping Data Form: if you select this option, a special section is added automatically to the order form with the fields for the customer's address details for shipping, if these differ from the details for sending the invoice.

As well as the fields for collecting invoicing and shipping data, according to current legal requirements, order forms must also specify the sales terms and conditions that regulate how the shopping cart functions, so that customers may read and explicitly accept them.

In the Sales Terms and Conditions section there is an editor which you can use to write the Sales Terms and Conditions Text. A standard text is included in the editor, and you can use the [image] button to create links to open, for example, the .PDF files containing your Sensitive Data Management Policy and Refund Policies. If you prefer, you can write your own text.

To meet current legal requirements, it is sufficient that the Sales Terms and Conditions appear immediately before the "Buy now" button, which confirms the order. You can also include the following option:

§Request confirmation of Sales Terms and Conditions: a field requesting the customer to explicitly accept the Sales Terms and Conditions is added at the end of the order form, and the customer can click on the check box to show his acceptance.
Click to expand/collapse Reference: Commands in the Send order section

You can use the commands in this section to define how data submitted in the shopping cart order form is treated, and to write the text of the order confirmation e-mails that are sent automatically to customers.

You can specify how data submitted in order forms is to be saved and sent to the website Administrator in the Sending order:

§E-mail Address for receiving Orders: specifies the e-mail address to which data submitted in the order forms is to be sent to. More than one e-mail address can be given: separate the e-mail addresses by a semi-colon (;).

§Attach Order Data in CSV format: submitted data is saved in a .CSV file, added to the bottom of the e-mail. Data in .CSV files is in text format, as a list of items separated by a semi-colon (;): these files can be imported to spreadsheet programs (e.g.Microsoft Excel).

Finally, in the User's Order confirmation e-mail section, you have the fields for specifying the Header Text and Footer Text for the order confirmation e-mail that is sent automatically to the customer. This e-mail contains the introductory text, the closing text and a description of the shipping and payment methods chosen by the customer.
Click to expand/collapse Reference: Commands in the Options section

You can use the commands in this section to define some settings for graphics, currency and VAT in the e-commerce shopping cart.

The following options are available for the Currency Settings:

§Currency: you can specify the currencies that will be accepted in the shopping cart. A drop-down menu shows a list of currencies: click on the [image] button to open the Currency List window and edit the list.

§Digit grouping: you can specify how prices are to be written: you can use the dot as the thousands separator and a comma as the decimal separator (1.000,00) or vice versa (1,000.00).

§Show Currency on the right: if you select this option, the currency symbol is placed to the right of the price.

§Show Decimal Places: if you select this option, the prices are given with two digits after the decimal separator.

The following options are available for the VAT settings:

Type: specify whether the prices shown in the shopping cart include VAT, do not include VAT, or whether VAT is not applicable.

Default value (%): specify the VAT value to be added by default to all the products in the shopping cart, with the exception of those products for which a different VAT value has been set with the VAT (%) option in the Product Settings | General window.

The following commands are available in the Options section:

§Allow orders only for minimum amounts: if you select this option, orders for less than a specified minimum amount will not be accepted.

§Minimum total amount: this option is available if Allow orders only for minimum amounts is selected. You can define the minimum total value that the order must reach to be accepted.You can use the Options to set the style of the tables showing the available products and/or added to the shopping cart:

§Header Background / Header Text / Cells Background / Cells Text / Table Border: you can specify the color of the various elements in the product table.

§Rounded Corners: you can specify the bevel for the corners of the product table, either for all four or singularly.

§Alternate row color: you can apply two background colors to alternate between even and odd rows. One of the colors is that specified in the Cells Background option and the other is applied automatically as a shade darker. Using alternating colors may make tables easier to read, especially long tables.

You can use the commands in the Images section to add the images for the shopping cart pages:

§Add to Cart/ Remove from Cart: you can specify which images you want to use for the "Add to cart" and "Remove from cart" buttons.

§Preview not Available: you can specify the image to be used when a particular product does not have a photograph associated with it (in Product Settings | Image), and the "Image and Text" or "Text and Image" option has been selected as the Display Mode for product cards in Products List Object | Settings.

When the shopping cart is complete, you have to add the information and necessary links in the website so that customers can display the information on the products and make their purchases. You can do this in two ways:

1.Include the "Buy now" button in the product presentation pages as you create them, using the Add to Cart link (see Link).

2.Create the product presentation pages with the Products List Object to use cards that already include the "Buy now" button.

When you create an e-mail shopping cart, the "e-commerce shopping cart" special page is automatically added to the Map: you can select it and define its main characteristics in the Page Properties window.

When you test the website offline, a message warns you that the order will not be sent and you will be redirected automatically to the order confirmation page. The e-commerce shopping cart will be fully functional when the website has been published on the server.

The server on which the website is published must support the PHP language and the Mail command must be enable, for your e-commerce shopping cart to work correctly. You can retrieve this information on server diagnostics from the WebSite Test section of the online Control Panel.

If you encounter problems in sending e-mails, it is probable that the server you are using does not have a standard configuration. Try changing the settings for the script and the e-mail send method, using the options in Advanced Settings | Data Management. For further information, contact your web space provider.

Best practices:

- | How to create an e-commerce shopping cart
- | How to import/export products in the shopping cart
- | How to write the order confirmation e-mail

Further information:

-

The online Control Panel


The Product Settings window

Shopping Cart | The Product Settings window

Step 4 - Advanced Settings > Shopping Cart >

Shopping Cart | The Product Settings window

 Return to chapter overview
Show/Hide hidden text

The Product Settings window opens when you select the New Product or Edit... commands in the Shopping Cart | Products section, and you can define and add a new product.

The window is organized in the following sections: General, Image, Options, Discount.

Click to expand/collapse Reference: Commands in the General section

You can use the commands in this section to give basic information on a new product to add to the Shopping Cart.

The options for defining a new product are:

§Name/Code: you can give a name or a code to the product.

§Description: you can write a description of the product.

§Price: you can specify the price of the product.

§VAT (%): if you select this option, you can specify the VAT rate to apply to the product. This option is available if you have set the Type as "VAT included" or "VAT excluded" as the VAT settings in Shopping Cart | Options.

Depending on how you want to organize your shopping cart, you can add products with prices that already include VAT or you can quote prices without VAT, which is useful for those articles which have a particular VAT rate applied to them, and add the tax separately for each article.

§Weight: enter the weight of the current product, so that the correct shipping charges can be calculated (see The Shipping Type window).

Depending on the type of product you want to add to the shopping cart, you can use the Weight option to express the weight in kilograms or grams, liters, cubic meters or any other unit of measure. Shipping costs need to be calculated correctly so it is important to choose the most appropriate unit of measure and apply it to all the products in the shopping cart.

§Link (ie: Product Page): this option opens the Link window where you can specify a link for the current product. The link could be, for example, to the website page that presents the product in detail.
Click to expand/collapse Reference: Commands in the Image section

You can use the commands in this section to add photos to a product in the Shopping Cart.

You can import a number of photos to create a Slideshow of the product: when visitors click on the single photos an enlarged version will be shown in the ShowBox.

Only the first photo associated with a product is shown in the shopping cart. The others can be seen in the product card, if you create one using the Products List Object.

The options for creating the list of photos to associate with a product are:

§Add... / Remove: you can add photos or remove the selected ones from the list that makes up the Slideshow. You can select several files at a time in the window that opens.

§Move up / Move down: you can change the order of the photos added to the Slideshow, moving the selected photo up or down to a new position in the list.

§Edit...: this option opens the l'Image Editor where you can edit the selected photo.

The following options are available in the ShowBox Properties section:

§Maximum size: you can specify the maximum width/height of the Showbox where enlarged versions of the photos are displayed. Leave the Keep Ratio selected to keep the ratio between width and height.

§Effect: click on the [image] button to open the Effect Properties window where you can define the transition effects for the photos in the Showbox.

You can customize the style of the Showbox: using the options in the Styles and Models | E-mail section of Step 4 - Advanced Settings , you can define colors, shadows, opacity, entry effects, etc.
Click to expand/collapse Reference: Commands in the Options section

You can use the commands in this section to create the list of options that are available for the new product you are adding to the Shopping Cart.

The main options of a product are, for example, the size, color and alternative models of the same product. Each option may have sub-options. For example, the "XY T-shirt" may have the main size options "S", "M" and "L": the sub-options for "S" may be "Black", "Red" and "Green"; the sub-options for "M" may be "Black" and "White", and so on.

Customers can view a complete list of the available options in the e-commerce shopping cart and/or in the product cards created using the Products List Object, and select the one he wants to order.

The commands for creating the Main Option List are:

§Add...: you can add the new main option for the current product. It will be displayed in the Main Option List and you can define it, using the options in the Main Option Settings section.

§Remove: you can delete the selected main option from the Main Option List.

§Move up / Move down: you can change the order of the main options in the list, moving the selected option up or down to a different position.

You can define the main options in the Main Option Settings:

§Name/Code: give a name or code to the main option you are creating for the current product.

§Price difference: specify the variation in price for the main option, with respect to the Price of the product indicated in the General section.

§Weight difference: specify the variation in weight of the main option, with respect to the Weight of the product indicated the General section.

Click to expand/collapse Reference: Commands in the Discount section

You can use the commands in this section to set a discount for the new product in the Shopping Cart.If you tick the Enable Quantity Discount option, you can create a list of the discounts to apply according to the number of products ordered. These bulk discounts are shown in a list, and the commands for creating them are:

§Add...: this command opens the Quantity Discount window, and you can add a bulk discount for the current product. You can define the product Quantity that must be the same as or more than the order for the Discount (%) to be applied.

§Remove: you can delete the selected bulk discount from the list.

§Edit...: this command opens the Quantity Discount window, where you can change the selected bulk discount. You can also double-click on the discount to edit it.

Best practices:

-

How to create an e-commerce shopping cart


The Shipping Type window

Shopping Cart | The Shipping Type window

Step 4 - Advanced Settings > Shopping Cart >

Shopping Cart | The Shipping Type window

 Return to chapter overview
Show/Hide hidden text

The Shipping Type window, which opens when you select the Add... or Edit... command in the Shipping type List section of Shopping Cart | Order Management, lets you define the shipping methods for the products in the shopping cart.

The Shipping Type window is organized in the following sections: General, Cost and E-mail message.

Click to expand/collapse Reference: Commands in the General section

You can use these commands to define a shipping method:

§Name: give the method a concise and clear name, so that you can easily identify it.

§Description: you can give a complete explanation for the method.

§Image: select the image to associate with the current method in the shopping cart pages.
Click to expand/collapse Reference: Commands in the Cost section

You can use the commands in this section to indicate ant surcharges for the current shipping method. These costs can be applied in one of the following ways:

§Fixed Cost: you can specify a fixed shipping cost for the current method. The cost remains fixed, regardless of the total weight or value of the order.

§Cost related to the Order's amount: you can define a range of shipment costs, that depend on the total value of the order. The Add... and Edit... buttons open the Shipping Cost window, where you can define the Order's amount to be reached or greater than, to apply the specified shipping Price.

§Cost related to Total Weight: you can define a range of shipment costs for the current shipment method, depending on the total weight of the products in the order. The Add... and Edit... buttons open the Shipping Cost window, where you can define the Total Weight to be reached or greater than to apply the specified shipping Cost.

For a correct calculation of shipping costs, make sure you specify the weight of each article in the shopping cart in the Product Settings | General window.

You can also use this option:

§VAT (%): if selected, you can specify the VAT to apply to the shipping method. This option is available if you have set the Type as "VAT included" or "VAT excluded" as the VAT settings in Shopping Cart | Options.
Click to expand/collapse Reference: Commands in the E-mail message section

You can use the field in this section to add an explanatory text on the shipping method. Pay attention to how you write this text, because it will be added to the order confirmation e-mail that is sent to the customer.

Best practices:

- | How to create an e-commerce shopping cart
- | How to write an order confirmation e-mail


The Payment Type window

Shopping Cart | The Payment Type window

Step 4 - Advanced Settings > Shopping Cart >

Shopping Cart | The Payment Type window

 Return to chapter overview
Show/Hide hidden text

The Payment Type is opened by the Add... or Edit... commands in the Payment type List in Shopping Cart | Order Management, and you can add the payment methods for the shopping cart.

The Payment Type window has the following sections: General, Type and E-mail message.

Click to expand/collapse Reference: Commands in the General section

You can use these commands to add a new payment method:

§Name: give the method a concise and clear name, so that you can easily identify it.

§Description: you can give a complete explanation for the method.

§Image: select the image to associate with the current method in the shopping cart pages.
Click to expand/collapse Reference: Commands in the Type section

You can use the commands in this section to choose the payment method, which may be:

§Pay later: the customer can send an order and pay later (for example, by bank transfer).

§Pay now: the customer can send the order and pay immediately (for example, by PayPal™, or other similar circuits, or by credit card).

If you select the Pay now option, you have to define the requested Payment Type; each type requires certain parameters:

PayPal/Credit Card

§PayPal Account: the PayPal™ account details must be entered.

§Payment Confirmation Page: you can select the page from the website map that is to be displayed to confirm payment.

§Payment Error Page: you can select the page from the website map that is to be displayed if an error occurs during payment.

Custom Code

§HTML Code for 'Pay Now' Button: if you use an alternative method to PayPal™, you must enter the HTML code provided by the payment service provider in this field.

The HTML code from the payment service provider is used to create the "Pay now" button, and it must include the ordered article's code and its price. You have to enter the following tags manually in the code, otherwise the shopping cart will not work correctly:

§[ORDER_NO] - the order number is entered here;

§[PRICE] - the price is entered here.

These options are also available:

§Cost: you can specify the handling costs (if any) that are applied to the selected payment method.

§VAT (%): you can specify the VAT rate that is applied to the cost of the payment method. This option is available if you have set the Type as "VAT included" or "VAT excluded" as the VAT settings in Shopping Cart | Options.
Click to expand/collapse Reference: Commands in the E-mail message section

You can write a message in the field in this section that describes and explains the selected payment method. This message will be included in the order confirmation e-mail that is sent to the customer.

Best practices:

- | How to create an e-commerce shopping cart
- | How to write an order confirmation e-mail


Export

Step 5 - Export >

Export

 Return to chapter overview

When you have finished a work session, or you have finished creating your website, you are ready to move on to Step 5, where WebSite X5 gives you the choice of how to export your project. Thanks to the built-in FTP engine, you can publish your project files directly on the server: secure connections are used, and you can save time by working in simultaneous connection and publishing only files that have been changed. Alternatively, you can export your website to your own computer, so that you have a copy of the files that will be published on the server. Finally, all the project files can be saved in a single folder, to be transferred to a different computer if you want to work somewhere else.

So, the various export options are:

Upload the Website to Internet

Export the Website to disk

Export the Project


Website Export to Internet

Step 5 - Export >

Website Export to Internet

 Return to chapter overview
Show/Hide hidden text

You can publish your website on the Internet in this window.

WebSite X5 provides a built-in FTP engine so you can publish your websites directly online. All the files necessary for correctly displaying a website on the Internet are saved on the computer you used to create the website. You have to copy your project files to a server (a computer that is permanently connected to the Internet) so that other people will be able to see your website online.

Click to expand/collapse Reference: Commands for establishing a connection to the server

The first thing to do when exporting your website is to specify the Session Profile (this data is provided by your Internet provider):

§Server Type: specify the connection to use for publishing the website files on the server. Choose the one that your server uses from the following:

-FTP - File Transfer Protocol: this is the default options. FTP is one of the oldest data transmission protocols and is still widely used. The data exchanged between client and server is not encrypted, according to the original FTP specifications.

-SFTP - SSH File Transfer Protocol: this is an Internet protocol that guarantees secure data transfer, using remote encrypted sessions and remote file manipulation.

-FTPS - FTP over explicit TLS/SSL: to ensure security, this protocol adds an encrypted SSL/TLS layer to the FTP protocol, plus a series of commands and reply codes.

§FTP Address: enter your FTP address in this field. An example of an FTP address is "ftp.websitex5.com", where "websitex5.com" is the domain name..

§Username / Password: enter your username and password in these fields.

§Save password: if you select this option, your password will be saved and you will not have to enter it again in the future..

There are also some Optional parameters, not strictly necessary for establishing a connection with the server, but you can enter them if you want to:

§Destination folder: enter the pathname of the destination folder on the server, provided by the Internet provider. If you do not enter the pathname here, you will be able to do so in the next window that WebSite X5 shows.

§Port: enter the name of the gateway on the server to which you want to establish a connection (your Internet provider will give you this information). It isn't usually necessary to change the default value.

§Simultaneous connections: enter the number of connections to the server that the built-in FTP engine needs to open simultaneously in order to publish the website files. The number of connections is equivalent to the maximum number of files that can be exported simultaneously.

The server you use must support Simultaneous connections. Although support is guaranteed, only a certain number of simultaneous connections can be handled efficiently. Try starting with 3 connections and progressively increase the number until you find the best number that the server can handle on its bandwidth. Generally speaking, it is not advisable to specify more than 10 simultaneous connections.

§Use Passive FTP: this is active by default, and it means that passive FTP is used for exporting projects. It guarantees greater connection compatibility with the server.

§Enable gzip compression: this is active by default, and means that the project files are compressed during the export procedure, so reducing export times.

Not all servers support gzip compression. If this option is selected, and your server does not support it, the files will not be compressed but the project will still be published. Gzip compression works very well for large files (that contain a lot of graphics, for example), but it is not recommended for small files.

When you have set all the necessary parameters for establishing a connection with the server, you can specify the Upload Mode (what and how you actually want to publish):

§Upload all Website files to the Internet: the entire website project is uploaded and published. This option is recommended the first time you upload your website, or when you have made a lot of changes to project files.

§Export only the files modified after last export on date: only the files that have been changed since the last export are uploaded. This option is recommended for websites that are constantly undergoing updates as it takes less time to upload the files than it would to upload the entire project.

The publication date is saved in the project file, so it is important to always save changes after publishing files.

Even if you choose to export only modified files, the HTML pages and resource files (in the RES folder) are also uploaded, because it is likely that they will have been automatically modified in some way.

§Export only Blog and RSS Feed: if you select this option, only the .PHP and XML files of the Blog and the .XML files of the RSS feed are published (see Step 4 - Advanced Settings). You can only select this option if the Blog and/or RSS feed have already been published once. It is useful for updating your Blog with new posts and adding new news to the RSS feed, when no other changes have been made to the website.
Click to expand/collapse Reference: Commands for going online

When you have set all the parameters, click on the Next button to establish a connection to the server. When this has been established, a list of folders already on the server is displayed. Use the available commands to move to the folder in which you want to publish your project files.

The folder where you want to publish your website must have an index.html file. If you are not sure which folder to use, ask your Internet provider: not all the folders on the server can be used for publishing websites.

Click to expand/collapse

The commands for working on folders and files on the server are:

Go back to the upper folder

This takes you back to the folder on the previous level.

Update

The contents of the folder are reloaded.

New folder

You can create a new folder.

Delete

You can delete the selected file or folder.

Rename

You can change the name of the selected file or folder.

Upload file to Server / Download the selected file from the Server

You can publish one or more files on the server that are not part of the project, or you can download files published on the server to your computer.

Display List / Display Details

You can choose the level of detail of the file list.

Finally, there is section with two further options:

§Log: you can choose to display the message log and any errors that may have occurred during the connection with the server.

§Queued files: you can choose to display the upload status of the files being published on the server (the maximum number of files depends on the number of simultaneous connections). A status bar shows the progress of each file transfer. When a file has been transferred, it is removed from the queue.

When exporting a project, WebSite X5 copies all the files in the registration folder to the server. If this folder contains files with the same name as those being published, the latter will be overwritten. WebSite X5 never deletes any files that are on the server: this has to be done manually.


Export completed

Step 5 - Export > Website Export to Internet >

Export completed

 Return to chapter overview

When your website has been successfully published online (see Website Export to Internet), this window suggests a number of ways to let people know about it, using channels such as WebSite X5's Gallery, Google™, Facebook and Twitter.

The options are:

Your Website is online!

You can start the default Internet browser to open your website and check that everything works correctly.

WebSite X5 Gallery

You can access the WebSite X5 Answers Gallery to submit your new website. The Gallery is a collection of websites created with WebSite X5 and submitted by their authors.

Update the SiteMap on Google

You can inform Google™ of the newly-published SiteMap, so that its search engine spider indexes it.

Broadcast publication on Facebook

You can post a message on your wall in Facebook to let people know you have published a website.

Broadcast publication on Twitter

You can write a tweet on your Twitter timeline to tell your followers that you have published a website.


Export to disk

Step 5 - Export >

Export to disk

 Return to chapter overview

In this window you can export a copy of your published website to your computer.

This option is useful for keeping a local copy of the files that are published on the server, so that you can copy them to another support (CD/DVD/USB) or to make changes to the HTML pages before confirming publication in the Internet.

To export the project files, you must specify:

§Destination folder: enter the name of the folder in which to copy the website. If the folder does not exist, it will be created automatically.

The Export to disk option is not intended to be used for making a backup copy of your project, because it exports the files used for online publication to your computer, and not the project file that can be edited.

If you want to have a backup copy of the project, so that you can restore previous versions, you have to use the Backup commands in the Save menu.

If you want a backup copy to be used in case you lose the original project, use the Export the Project feature: this will make you a copy of the original project files.

Best practices:

- | How to organize projects in WebSite X5
- | How to organize backup copies of your project


Export the Project

Step 5 - Export >

Export the Project

 Return to chapter overview

In this window you can export all the files linked to your project in a single, compressed file so that the project can be transferred to another computer or you can make a backup copy of it.

You have to specify:

§Destination folder: enter the name of the folder to export the project to. If this folder does not exist, it will be created automatically.

When the project has been exported, a single compressed file is created in the destination folder. It has the same name as the project, with a .IWZIP extension. For example, if the project file is called "myproject", the new compressed file will be called "myproject.iwzip". Both the project file (a .IWPRJ file) and all the files linked to it (the files containing graphics, videos, audio, Flash animation, etc.) are saved inside the compressed file.

Before you export the project, you can use the following options:

§Include a copy of the WebSite preview files: you can include the files for displaying previews when consulting the website locally (on your computer) in the compressed .IWZIP file. The size of the .IWZIP file will increase but it won't be necessary to recreate the preview files if you transfer the project to another computer.

The compressed .IWZIP file can be transferred to another computer and opened by the Program using the Import... command in the Project Selection window.

Best practices:

- | How to organize projects in WebSite X5
- | How to organize backup copies of the project


How to organize backup copies of your project

Best Practices > General Settings >

How to organize backup copies of your project

 Return to chapter overview
Show/Hide hidden text

A fundamental aspect of organizing a project is creating a backup copy of it.

Creating a backup copy of a project means creating a safety copy, to keep on your computer or on another storage device, as a safeguard against loss of the original.

If you have a backup copy of your project, you can safeguard yourself against:

§Disaster recovery - recovering a project after fatal errors caused by events such as problems with your computer or the involuntary deletion of data.

§Version recovery - creating copies that correspond to different versions of your project, so that you can, for example, cancel changes made in a work session and restore a backup copy of the version as it was before you made the changes.

For backup copies to be really useful, you need to be methodical and systematic in creating them.

Click to expand/collapse Version recovery - How to create an automatic backup copy

To automatically create a backup copy of your project, you need to:

§open the project,

§select the Create a Backup Copy when saving the Project the first time option in the Save menu,

§alternatively, or at the same time, select the Create a Backup Copy every time you upload option in the Save menu.

If you select the Create a Backup Copy when saving the Project the first time option, a backup copy of the project is made when you save the project for the first time, whereas if you select the Create a Backup Copy every time you upload option a backup copy is made before the website is published online.

All the backup copies you make are saved in the Backup subfolder in the Projects folder that you specify in the Preferences window.
Click to expand/collapse Version recovery - How to restore a backup copy of a project

If you need to restore a backup copy of a project, you have to:

§open the Backup subfolder, in the Projects folder (that you specify in the Preferences window) and select the file corresponding to the backup copy you want to restore: this will be either Backup.iwprj, created with the Create a Backup Copy when saving the Project the first time option, or Uploaded_timestamp.iwprj, created with the Create a Backup Copy every time you upload option;

§cut the file you select in the Backup subfolder and paste it into the Projects folder;

§delete the "project.iwprj" file that contains your project and rename the file of the backup copy as "project.iwprj";
Click to expand/collapse Disaster recovery - How to make a backup copy of your project

If you want to make a backup copy of your project to keep on a separate storage device, you have to:

§select Export the Project in Step 5 - Export to export all the files linked to your project in a single compressed file (.IWZIP);

§copy the .IWZIP file to the storage device you want to save the backup copy on.

Click to expand/collapse Disaster recovery - How to restore a backup copy of your project

If you want to restore a backup copy of your project that is stored on a separate storage device, you have to:

§click on the Import... button in the Project Selection window to select the .IWZIP compressed file containing the project you want to restore;

§select the restored project to open it and continue working on it.

Best practices:

-

How to organize your projects


How to organize projects

How to organize projects in WebSite X5

Best Practices > Step 1 - General Settings >

How to organize projects in WebSite X5

 Return to chapter overview
Show/Hide hidden text

It's very easy to organize your projects in WebSite X5 because most of the procedures are automatic.

In WebSite X5, each website you create corresponds to a project, that is saved in a file called project.IWPRJ (where "project" is the name you give to your project). This file is created automatically the first time you save your project: it is saved in the Projects folder which you can specify in the Preferences window.

As well as creating the project file, WebSite X5 also creates and make a copy of all the resources (pictures, animation, videos, etc.) that are linked to the project. This provides a double advantage:

1.The resources linked to the project are optimized: copies of the pictures, for example, are saved in a size that is best suited to be displayed in the website (which is not necessarily their original size), and they are also compressed when saved

2.Even if you move or delete the original files from the position they were originally saved at, the project still continues to work and all the resources are displayed correctly.

Click to expand/collapse How to import/export a project from one computer to another

While you are working on a project, you may need to move it to another computer (if you want a copy of it at home/in your office, or make a copy for a colleague, etc.). It is essential to move not only the project file, but also all the files that are linked to it.

First of all, you have to export the project:

§In Step 5 - Export, select the Export the Project option and click on the Next button.

§In the Export the Project window, select the Destination folder and, optionally, click on the options to also export the files necessary for displaying the preview on your computer.

When the export procedure is finished, you will have a single, compressed file in .IWZIP format that you can easily move from the Destination folder to another computer.

If you want to import a project to a computer where WebSite X5 is installed, you have to do the following:

§In Step 1 - Project Selection click on the Import... button and select the .IWZIP file that has been exported from another computer.

§When the file has been successfully imported, a preview of the project is displayed in the list of existing projects: select it and click on the Next button to edit it.

Click to expand/collapse How to make a copy of your project

You may sometimes find you need a copy of the original project. This may be to restore your project to the state it was in before making certain changes, and in this case WebSite X5 provides the commands necessary for doing this (see How to organize backup copies of your project). Or you may want to duplicate a project to use as the basis for another one, and in this case you will find it more useful to:

§select the project you want to make a copy of from the list of existing projects in Step 1 - Project Selection;

§click on the Duplicate button;

§select the copy that has been made and rename it appropriately, then click on the Next button to edit it.

Duplicating a project is useful when, for example, you want to create a multi-language website. Once you have created the project in the first language (English, for example), you can duplicate it to create the projects in all the other languages. The structure is already defined so all you have to do is translate the text and update any graphics that may change from one language to another (see How to create a multi-language website).

Best practices:

-

How to organize your projects


How to translate text that is entered automatically

Best Practices > Step 1 - General Settings >

How to translate text that is entered automatically

 Return to chapter overview
Show/Hide hidden text

Some elements in the pages created with WebSite X5 are added automatically by the Program; they may be, for example, links and anchors to other parts of the website, buttons in the Gallery Object, labels for the E-mail Form Object, labels and text for the e-commerce shopping cart, or text that appears in the Map.

Obviously, the text that appears in these elements must be in the correct language for the website, and to ensure this happens you must specify the first language of the website in the Content Language option which is in the General Settings window. WebSite X5 offers a number of default languages, including English, Italian and German, with the necessary translations. The default translations can be changed, and you can add or import new languages, or remove unnecessary ones. To do this, click on the [image] button next to the Content Language in the Language Content Management window.

Click to expand/collapse How to change existing automatic text

Examples of text that is added automatically by the Program are the labels on the "Send" and "Reset" buttons at the bottom of e-mail forms.

Imagine you have selected "English" as the Content Language, and you want to change the "Reset" label to "Ignore":

§In the Language Content Management window, click on "EN - English" to display the text elements in English that are already present in the translation table.

§In the first column of the table, look for the "label_reset" item, which is the label for the button you want to change. Move along the row to the corresponding cell in the English language column. Double-click on the cell to make the cursor appear: delete the word "Reset" and type "Ignore" in its place.

§Close the window: your changes will be saved automatically.
Click to expand/collapse How to add a new language

If you want to create a website in a language that is not included in the list of available languages (for example, Portuguese), to avoid having the automatic text added in English (which is the default language), you must add a new language to the list. You will also need to provide the translations of all the texts, so make sure you have these available when you want to add a new language. Once you have the necessary translations, adding a new language is easy:

§In the Language Content Management, click on the Add a new Language button and type "PT - Português" in the dialog box that is shown. This new entry will appear at the bottom of the list of available languages.

§Click on "PT - Português" to display the column for this language in the translation table.

§Type in the translations for each item and then close the window when you have finished: this automatically saves your work.

§Set "PT - Português" as Content Language in the General Settings window.
Click to expand/collapse How to export/import a language

If you need to develop a website on two different computers in a language that is not catered for by the Program, you can export the new language created on one of the computers and export it to the other.

§On the first computer, click on the Add a new Language to open the Language Content Management window and start translating into the new language.

§Select the new language from the list of available languages and click on the [image] Export the selected Language: a .XML file with the new language will be saved in the specified folder.

§Move the .XML file to another computer.

§Open the Program and go to the Language Content Management window. Click on the [image] Import a new Language to select the .XML file to import.

If the imported language is already in the list, it will not be duplicated, but any new items will be added and modified items will be updated.

Best practices:

-

How to create a multi-language website


How to use Google Webmaster Central™

Best Practices > Step 1 - General Settings > Working with Google >

How to use Google Webmaster Central™

 Return to chapter overview

Google Webmaster Central™ is a free service provided by Google™ to help web Administrators design a website that conforms to its site analysis methods. These tools help diagnose website problems and, if correctly used, they can help improve a website's ranking in search results.

To use Google Webmaster Central™, you will first need a Google Account and be able to prove that you are the owner of the website to be analyzed. One way of proving you are the owner of the website is to copy a meta tag supplied by Google™ in the first <head> section of your Home page, before the <body> section.

This is what you have to do:

§Open an account with Google™.

§Go to the Google Webmaster Central™ home page and log in.

§Click on Add a site in the Home page and type the complete URL of the site you want analyzed. Click on Continue.

§In the Verification Page, select Metatag as the verification method.

§Copy the meta tag supplied by Google™ and paste it into the Verification metatag for Google Webmaster Central in the General Settings | Expert window of WebSite X5: the Program will add the meta tag in the correct position to the HTML code of your Home page.

§A verification meta tag from Google™ looks like this:

<meta name="verify-v1" content="VOPYsjbR4uw/YqV+MWLB0lVmJt0niwdkv9PQTsTREHQ=" />

§Once you have published your website, go back to the Site Verification page in Google Webmaster Central™ and click on Verify to complete the procedure.


How to monitor website performance with services such as Google Analytics™

Best Practices > Step 1 - General Settings > Working with Google >

How to monitor website performance with services such as Google Analytics™

 Return to chapter overview

Many website statistics tools are available on the Internet, and one of the most popular is Google Analytics™. This free tool provides numerous reports for monitoring and analyzing visits to your website. Google Analytics™ can be used for simple analysis such as counting the number of visits, through to more complex work such as judging the efficiency of your advertizing campaigns running on the Google Adsense™ program.

To make use of Google Analytics™, you need to tell the search engine which website is to be analyzed, and which pages are to be tracked. For this, you will need to add a special tracking code to the website pages.

This is what you have to do:

§Open an account with Google™.

§Go to the Google Analytics™ home page and log in.

§In the Analytics Settings page, click on Add website profile to enter the URL of the website to be analyzed.

§When you have created the profile, go to the Overview page and click on the Edit button in the Actions column for the website you want analyzed.

§In the Profile Settings page, the "Unknown tracking" status will be shown. Click on Status check to display the code you will need to use to track your pages.

§Copy the tracking code provided by Google™ and paste it into the Custom Code field in the General Settings | Expert window of WebSite X5, specifying that it must be added before the <head> section is closed.

The tracking code provided by Google™ looks like this:

<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

try {

var pageTracker = _gat._getTracker("UA-110367-1");

pageTracker._trackPageview();

} catch(err) {}</script>


How to create and link the website's SiteMap Map

How to create and link the website's SiteMap

Best Practices > Step 1 - General Settings > Working with Google >

How to create and link the website's SiteMap

 Return to chapter overview
Show/Hide hidden text

WebSite X5 generates your website's XML SiteMap.

A SiteMap is an XML file that contains a list of all the pages in a website. It was introduced by Google™ (and is now used by Yahoo! and MSN) to scan websites more quickly and effectively. In other words, if you create and submit your SiteMap to a webmaster, it can ensure that its search engines, and in this case Google™, is informed of the existence of your website and all its pages, including those which would not be "seen" by normal scanning procedures.

You can use the SiteMap to direct search engines to including specific site content, such as videos, images, news, etc. The SiteMap can also contain additional information on how often pages are updated, when they were last edited, the importance of each page within the website (this parameter does not affect a page's positioning within the search results).

Click to expand/collapse How to activate the SiteMap

To create and link the SiteMap to a website, leave the Automatically create a SiteMap option active as the default setting in the General Settings | Expert window.

Now you can add additional information for each page, as follows:

§In Step 2 - Sitemap Creation select the page you want to work on.

§Click on the Properties... button to open the Page Properties window and open the Expert section.

§Leave the Add this page to the Sitemap option as it is (active) and select the Contents Priority and Update frequency options.

§Repeat these operations for the other pages in the website.
Click to expand/collapse How to include images in the SiteMap

The SiteMap can be used to give additional information to Google™ on the images that are in the website, so helping the webmaster's search engine find images that would otherwise be by-passed (for example, images that are included in JavaScript modules) and to recognize the images that are more important than others. For example, by not including images in the SiteMap that are part of the graphic template, or that are purely ornamental, you indicate to Google™ that they are less important than others.

Google™ specifies that you can add a maximum of 1000 images per page in the SiteMap, and that it cannot guarantee that all the images will be indexed, or that all the additional information will be taken into account.

Once you have created your SiteMap, it is easy to add information on the images:

§Double-click on the Image Object that corresponds to the image you want to work on, to open the Image Object window.

§Open the Sitemap section and select the Add Image to Sitemap option.

§The Title, Caption, Geographical position (e.g. Address, Town, etc) and Licence URL are optional.

§Repeat these operations for all the important images in your website.

For more information, see Image Object | Sitemap.
Click to expand/collapse How to include videos in the SiteMap

The SiteMap can also be used to inform Google™ about the videos you have in your website. Again, Google™ does not offer any guarantees, but if you do include videos on the SiteMap, you increase the possibility that they will be traced and included in Google Video™ searches.

You can use the SiteMap to give additional information, such as the title, description and length of the video, that may simplify the search. This, and other information, is included in the Search Engine Results Page (SERP). However, Google™ may use the text on your video's page for the SERPs, rather than the text you supply in the SiteMap's video content, if this differs.

Completing the SiteMap with video content is easy:

§Double-click on the Video/Audio Object option for the video you want to add, to open the Video/Audio Object window.

§Open the Sitemap section and select the Add video to the Sitemap option.

§Add the mandatory information that must be included in the SiteMap: Title, Caption and Image preview of the Video.

§You can, optionally, include the following information: Category, Website Keywords, Publication Date, Length (secs) and Contents suitable for everybody.

§Repeat these operations for each video that you want to include in the SiteMap.

For further information, see Video/Audio Object | Sitemap.
Click to expand/collapse How to remove a page from the SiteMap

When a SiteMap is created, all the pages in the website are included in it by default. If you don't want search engines to consider a particular page, just remove it from the SiteMap:

§Select the page you want to remove from the SiteMap in the window in Step 2 - Sitemap Creation.

§Click on the Properties... button to open the Page Properties window, and then open the Expert section.

§Untick the Add this page to the Sitemap option.

§Confirm and save.

Sources:

- | SiteMap (en.wikipedia.org)
- | About Sitemaps (Goggle WebMaster Central)
- | Adding information on images in a Sitemap (Google WebMaster Central)
- | Creating a Video Sitemap (Google WebMaster Central)


How to work with the templates

Best Practices > Step 1 - General Settings > The graphic templates >

How to work with the templates

 Return to chapter overview
Show/Hide hidden text

With WebSite X5, you will find it easy to work on the graphic templates (the backbone of your website), because they are all extremely flexible and easy to use. Thanks to the default templates, with numerous possibilities of customization and, above all, the possibility of creating templates of your own, you can be sure of obtaining the look you want for your website.

You can also import and export templates (extracting them from the projects they were originally created for), and this makes resource sharing incredibly simple.

Click to expand/collapse How to use a default template

WebSite X5 provides a gallery of over 1.500 default templates. Choosing the one that is right for you is simple:

§Open the Template selection window and filter the Menu Type that interests you (horizontal or vertical).

§Look through the preview of the templates to choose the one you like best.

§Select the template you want to use and click on the Next button to apply it to your project and open the Edit Graphic Template where you can add elements to the header and footer.
Click to expand/collapse How to set up a custom template

When you have created a layout, using an external graphic editor, you can apply it to your WebSite X5 project with the Custom Template feature:

§Open the Template selection and use the filter for the Categories to display the custom templates.

§There will be at least one custom template in the list. You can select it and click on the Edit... button (or double-click on the template) to open the Custom Template window.

§If you want to create a new custom template, starting from scratch, to add to the gallery, click on the New Template button: give a name to the new template and start working on it.

All the custom templates that are created are added to the Template Gallery, and can be used for other projects.
Click to expand/collapse How to create a new template based on a default template

A default template is often a good start for creating your own custom template, if you like the basic layout but want to add some ideas of your own. This is what you have to do:

§Open the Template selection window and use the filters to identify and select the default template you want to start from.

§Click on the Duplicate button to make a copy of the template: this copy is saved among the default templates.

§Select the copy you have just made and click on the Next button to open the Custom Template window, where you can make the necessary changes.
Click to expand/collapse How to import/export a template

You can export a project's template so that you can use it on another computer, or so it can be used by other people.

To export a template:

§Open the Template selection window, select the template and click on the Export... button: a .IWTLP file is created in the specified export folder.

§Copy this .IWTPL file to the computer on which you want to import the template.

To import a template that has been exported with WebSite X5:

§Open the Template selection window on the second computer and click on the Import... button: select the .IWTPL file of the file to be imported.

§The imported template will be added to the list of custom templates.

.IWTPL files only contain the images and settings for the relative template: when exported, they do not contain information on the project.

To export a project, you have to use the commands in Step 5 - Export.

Best practices:

-

Where to find new WebSite X5 templates


Where to find new WebSite X5 templates

Best Practices > Step 1 - General Settings > The graphic templates >

Where to find new WebSite X5 templates

 Return to chapter overview

If you're looking for a new template to use for creating or restyling a website, you will find lots of new ideas in WebSite X5 Templates, the section of the official WebSite X5 website that you can reach at http://answers.websitex5.com/templates.

In WebSite X5 Templates you will find lots of new templates that have been created by Incomedia or by other users. Some are free and some have to be paid for. You can download them and use them for your projects.

You can also propose your own work. If you enjoy web designing, you could become one of our affiliated authors, submit your proposals and make some money. For more information go to http://answers.websitex5.com/templates.

Don't forget to visit WebSite X5 Templates regularly, to see what's new: if you want, you can subscribe to the RSS feed and be kept constantly up to date on all the latest news.


How to create and work on the website Map

Best Practices > Step 2 - Sitemap Creation >

How to create and work on the website Map

 Return to chapter overview
Show/Hide hidden text

In WebSite X5 the website Map has a typical tree structure: it stems from the Home page and branches out into the various levels, where all the pages are. Every website map has a Home page and a varying number of pages linked through the menu. As you add pages, you organize them into the various levels of the menu.

Remember that the levels in WebSite X5 are categories and not real pages with content. Levels contain pages.

Separators don't have content either. They are used to visually organize the navigation menu.

Click to expand/collapse
Example of a map and its menu

Your aim, when designing the website Map, is to create a logical structure for the website contents, so that visitors can find the information they are looking for easily.

Click to expand/collapse How to create the website Map

Creating and designing the website Map in WebSite X5 is easy:

§In the window of Step 2 - Sitemap Creation use the New Level, New Page and Separator buttons to add new levels, pages and separators to your Map.

§Name the items in the Map carefully: these names appear in the navigation menu and as file names. If you want to change a name, click twice on it or use the Rename button.

§You can edit the Map at any time, moving pages, levels and separators to different places: select the item you to move and drag it to a new position, or you can use the Move up / Move down buttons.
Click to expand/collapse How to work on the website Map (commands and shortcuts)

There are several shortcuts available for making work on the websiteMap quicker:

§Click a second time on a selected level, page (including the Home page) or a separator to rename it (instead of using the Rename button). You can also rename the aliases for Special pages in the Menu folder, but you cannot rename the Special pages themselves.

§After selecting a page, click on the Extended title or Description to change the text (otherwise you will have to re-open the Page Properties window to edit the text).

§You can double-click on a level to expand and view all the pages at that level, and double-click again to collapse it (this is quicker than using the Expand and Collapse buttons). You can also expand and collapse a level by clicking on the arrow in front of its name.

§Double-click on a page to open the Page Creation window, where you can create the page.

§Double-click on a Special page to open the Step 4 - Advanced Settings window, where you can create/edit it.

§Select a level and drag it to a new position, taking all its pages with it (instead of using the Move up / Move down buttons).

§Select one or more pages and drag them to a new position (instead of using the Move up / Move down buttons). Use the CTRL + click or SHIFT + click combinations for multiple selections. Multiple selections can include Hidden or Locked pages.

§Select the Menu folder and hide the navigation menu, clicking on the Hidden Page in the Menu button.

§Select a Special page and drag it to the Menu folder (to the pages and levels that will make up the navigation menu) to create a level that acts as an alias for the Special page. This level will have the same name as the Special page and a link to it. By doing this, you can provide a link in the navigation menu that will go directly to the results page of the built-in search engine, the Welcome page, the Blog, the Members' Area or the e-commerce shopping cart.

§Select one or more pages and copy and them paste to another place in the project, or to a different project that you can open in another widow of the program. You can use the commands in the tool bar, in the popup menu (rightclicking the mouse) or with the CTRK+C and CTRL+V key combinations. Remember that you cannot copy and paste Special pages.


How to best use page and level properties

Best Practices > Step 2 - Sitemap Creation >

How to best use page and level properties

 Return to chapter overview
Show/Hide hidden text

The fundamental elements of the website Map are the levels, pages and separators (see Step 2 - Sitemap Creation): if you liken the website to a book, then the pages are the pages, the levels are the chapters and the separators are book marks.

Pages and levels have properties that give different graphic and functional results.

Click to expand/collapse How to include a link to another website in the Main menu

WebSite X5 creates the navigation menu on the basis of the website Map. When you test the website on your computer, you can check that the links on the items in the menu work correctly: the links on levels display a submenu, and links on pages open the corresponding page.

You can also insert items in the navigation menu that have different kinds of links, for example a link that opens another website.

The procedure for doing this is as follows:

§In Step 2 - Sitemap Creation, add a New Level and give it a name.

§Select this new level and click on the Properties... button to open the Level Properties window.

§Click on the Hide the Drop Down Menu for this Level option and then click on the [image] button of the Link to be executed on item click option to open the Link window and choose the action to associate with the level.

§As you want to link to another website, select File or URL and type in the URL of the website in the Internet file field.

You can use this method for all the various actions available in the Link window to create particular items in your website's navigation menu..
Click to expand/collapse How to change a page's background

Generally speaking, all the pages in a website have the same design, that is given by the chosen template (see Template selection). However, some elements in a page can be changed. One of these is the background, which is the area outside the page that is visible when the browser is opened with a higher resolution than the website.

Click to expand/collapse
Example

To change the background of a single page, you have to do the following:

§In Step 2 - Sitemap Creation, select the page you want to work on.

§Click on the Properties... button to open the Page Properties and then open the Graphic section.

§In WebSite Background for this Page only use the Image File option to import the picture you want to use as the background for this page. Use the Repeat and Alignment options, if necessary, to correctly position the image with respect to the browser window.

§If the background image is to be fixed (it mustn't scroll with the page), select the Fixed Background.
<%%EXTOGGLE> How to change the background of the contents of a single page

Another element that you can change for a single page, with respect the template that sets the design for the whole website (see Template selection) is the background of a page's content (the central area of the page that contains the actual contents).

Click to expand/collapse
Example

To change the background of a single page's contents, you have to do the following:

§In Step 2 - Sitemap Creation, select the page to work on.

§Click on the Properties... button to open the Page Properties window and then open the Graphic section.

§In Page Content for this Page only use the Image File option to import the image to use as the background. Use the Repeat and Alignment options, if necessary, to correctly position the image.

Click to expand/collapse How to create an Info popup window

You may sometimes need to create a page that gives further information on a particular topic: you can create a popup window, with a different size and design with respect to the template, for this.

Click to expand/collapse
Example - Page displayed in a popup

The steps to create this popup are:

§Create a normal page and add the extra information you want to give as the contents.

§In Step 2 - Sitemap Creation, select the page and click on the Properties... button to open the Page Properties window and then open the Graphic section.

§Select the Create the Page without the Template option and specify the Page Width in pixels.

§Select the element (the text, for example) on which to add the link which will open the popup window and click on the [image] button to open the Link window.

§Select Website Page as the action, then select the new page and tick the Open in a popup window option, giving the size in pixels of the popup window (which must be the same as the size given above for the page).
Click to expand/collapse How to add icons next to items in the navigation menu

You can add icons next the items in the navigation menu.

Click to expand/collapse
Example - Menu item icons

If you want all the items in the menu to have the same icon, you have to work on the Dropdown and Page Menu style:

§In Step 4 - Advanced Settings, open Drop Down Menu Style | Menu Items and select the image you want to use as the Bullet Icon.

§Still in Step 4 - Advanced Settings, open Page Menu Style | Menu Items and select the image to use as the Bullet Icon.

If you want to associate a particular icon with a specific item, you have to use the Page or Level Properties (according to the position of the item in the website Map):

§In Step 2 - Sitemap Creation, select the page or level to work on.

§If you are working on a page, click on the Properties... button to open the Page Properties window and then open the Graphic section and select the image to use as the Icon for the Menu item.

§If you are working on a level, click on the Properties... button to open the Level Properties window and select the image to use as the Icon for the Menu item.

You can give basic settings for the menu styles and then use single page and level properties for individual cases.


How to create a page using the page layout table

Best Practices > Step 3 - Page Creation >

How to create a page using the page layout table

 Return to chapter overview
Show/Hide hidden text

WebSite X5 uses a unique page layout method where you see exactly what the page will look like as you work on it.

The page is shown as a table where you can specify the number of rows and columns to make the cells which will contains the various contents.

You can easily drag and drop the content Objects into the cells.

Click to expand/collapse Reference: How to set up the page layout table

The default table is 2 rows x 2 columns, and you can add more rows and columns so that you have enough cells for all your contents, and then you proceed to add the necessary content Objects to the cells.

Use the [image] [image] buttons in the tool bar to add rows and columns. The table can have a maximum of 64 rows and 12 columns.

All the rows and columns in the page layout table automatically have the same width and height. You can change the width of the columns manually, entering an absolute value (in pixels) or a relative value (as a percentage), using the cursors at the bottom of the table:

§Click on and drag a cursor to move the column line. It is moved by a tenth of the available space. For greater precision, hold down the CTRL key to move the line one pixel at a time.

Click to expand/collapse

§Right-click on a cursor and choose Set Column Width from the menu, and then type in the width of the column in pixels.

Click to expand/collapse

§Right-click on a cursor and select Reset Column Width to restore all the columns to the same width.
Click to expand/collapse Reference: How to add contents to the page layout table

Once you have defined the size of the page layout table, you can enter the page contents by adding Objects to the cells. To add an Object, select the icon that represents it and drag and drop it into the appropriate cell.

A cell can contain only one Object, but an Object can occupy several adjacent cells. If you drop an Object icon onto the border of a cell, the Object will occupy the cells sharing that border. You can also pull on the Object's handles to pull it into adjacent cells.

You can move Objects around the page layout table, even when they occupy more than one cell, providing there is enough space for them in the position you want to move them to. You can use the arrow keys for moving Objects:

§arrow keys: they move the selected Object from one cell to another in the table.

§CTRL + arrow keys: this combination moves the selected Object to a different place in the table, maintaining its size.

§SHIFT + arrow keys: this combination moves the selected Object to a different place in the table but it changes its size, making it bigger (compatibly with other Objects) or making it smaller to occupy fewer cells.

You can right-click on an Object's icon in a cell, or in an empty cell, to open a menu with the Cut, Copy, Paste, Delete, Cell Properties, Add Row, Add Column, Delete Row and Delete Column commands.

Use these commands, for example, to make a copy of an Object and paste it into a different cell or page, or delete it. You can also remove an Object by dragging it outside the page layout table, or by pressing the DEL key. Remember that an Object will be removed if you add a new Object to the cell it is in, and the second Object will take its place. However, if you drag an Object from one cell to an occupied cell, the two Objects will simply change places.

The Copy Style and Paste Style commands in the submenu of the Cell Style command are used to apply the settings defined in the Cell Style window for one cell to another cell.

When you added an Object to a cell, you can open the window in which to define its actual content (Text Object, Image Object, Table Object, Gallery Object, Video/Audio Object, E-mail Form Object, Guestbook Object, Social Network Object, Map Object, Flash Animation Object, Products List Object, HTML and Widgets Object), double-clicking on the cell in the table where you have inserted it or selecting the Object and clicking on the [image] Object Content button.

You don't have to populate all the cells in the table: remember, though, that an empty cell will correspond to an empty space in the page.

To make the best use of the page layout possibilities, remember that the software follows these rules:

§The page width is determined by the template.

§The width of the columns in the table is equal to the page width divided by the number of columns. By default, all the columns have the same width, but you can change the width of each one manually.

§All the cells in a row have the same height: by default, the height is that of the biggest Object among those in the cells in a row.

§Inserted Objects are automatically resized according to the size of the cells in the table.

Further information:

-

The Box Model in WebSite X5


How to work with the Text Object

Best Practices > Step 3 - Page Creation >

How to work with the Text Object

 Return to chapter overview
Show/Hide hidden text

Double-click on a Text Object in the page layout table or select it and then click on the [image] button to open the Text Object window. In this window, you can use an editor to enter and format texts.

Click to expand/collapse How to create a text with a scroll bar

When you add a Text object to a page, its height is automatically set to display all the contents. If the text is long and you want to display it in a small window, you can set its height manually and force the addition of a scroll bar.

§Add a Text Object to a page and then open the Text Object window to enter and format the text.

§Click on the [image] button to open the RollOver window.

§Select the Enable Rollover option and set the None - Show Scrollbar option Movement.

§Set the value in pixels for the Height.
Click to expand/collapse How to create a scrolling text

One way to display, for example, a series of news articles is to scroll the headlines. You can do this either horizontally or vertically.

§Add a Text Object to a page and then open the Text Object window to enter and format your text.

§Click on the [image] button to open the RollOver window.

§Select the Enable Rollover option and set, for example, the Single Slide option as Movement, specifying the Direction.

§Use the various parameters to define the effect and select the Stop on Mouse Over option: if there is a link for further details on a particular article, visitors can stop scrolling and click on the article they want to read.


How to work with the Image Object

Best Practices > Step 3 - Page Creation >

How to work with the Image Object

 Return to chapter overview
Show/Hide hidden text

Double-click on an Image Object that you have inserted in the page layout table or select it and click on the [image] button to open the Image Object window. Here, you can indicate which file you want to import, define its properties, set close-up and wide-angle effects, add it to the SiteMap and, in this case, add the necessary information for it.

Click to expand/collapse How to edit an image

WebSite X5 lets you import all the main graphic formats available and automatically optimizes the images, resizing them to fit in the cells of the page layout table and saving a compressed copy of them (according to the Quality factor given in Image Object | Display).

WebSite X5 also provides a versatile built-in editor for editing your pictures:

§Select the image to work on (Image Object, Gallery Object, Shopping Cart | Product Settings | Image).

§Click on the Edit... button.

§Use the various options in the Image Editor to cut, rotate and edit the image, applying filters, frames, etc.

§If necessary, you can make a copy of the original picture, using the Save As... command.

Click to expand/collapse How to create a wide-angle picture

Wide-angle photographs are very attractive but there isn't always enough space on a website page to show them to their best.

A simple answer is to insert them in a smaller window and let visitors move the picture to view the hidden parts.

§Prepare a wide-angle photo that develops on a horizontal plane, so it is wider than it is high.

§Insert an Image Object and import your wide-angle photo.

§In Image Object | Display set the Display Mode to Manually enlarge and move the Image or Automatically enlarge and move the Image and then select the Horizontal Panoramic View as Movement Mode.

§Enter the actual Height of the photo.

§You can also use the Show the navigator option to give visitors an interactive preview of the full picture.

You can insert wide-angle photos that develop on a vertical plane in the same way.
Click to expand/collapse How to create a button with a mouseover effect

A pleasant and useful effect is the mouseover effect that you can apply to buttons. With WebSite X5, you can apply various types of mouseover effects on the images given to buttons, and customize them. The most common effects that are applied to buttons are those for when the button is "pressed" or "released".

§Prepare two pictures to represent the button when it is "pressed" and when it is "released".

§Insert an Image Object and import the file containing the image for the "released" state.

§In Image Object | Display set the "Superimposed image" option as Mouse Over Effects and import the file containing the image for the "pressed" state. The two images should have the same size, so it won't be necessary to align them.

§Complete the button by setting up the link: go back to Image Object | General and click on [image] to open the Link window and select the appropriate action..

You can use other mouseover effect to highlight a picture, show up captions, or for buttons that indicate a function that can be used, such as a magnifying glass to enlarge something or a Play button to start music or a video.
Click to expand/collapse How to protect pictures from unauthorized copying

It is quite simple to download a picture from the Internet. WebSite X5 offers you two ways of preventing unauthorized copies of your pictures from being made:

1. Disable the commands in the browser's context menu:

·Select the picture and go to the Image Object | Display window.

·Select the Protect Image against copy option.

2. Apply a watermark to the picture:

·Select the picture and go to the Image Object | General window, then click on the Edit... button to open the Image Editor.

·Open the Watermark section and select the picture you want to apply a watermark to from the list.


How to work with the Video/Audio Object

Best Practices > Step 3 - Page Creation >

How to work with the Video/Audio Object

 Return to chapter overview
Show/Hide hidden text

Double-click on a Video/Audio Object inserted in the page layout table, or select it and click on the [image] to open the Video/Audio Object window. In this window, you can specify the name of the file to import, define its properties, decide whether to include it in the SiteMap and, if so, give the information necessary for it.

Click to expand/collapse How to insert a video from YouTube™

Often, videos that you want to add to a website page are not stored on your computer, but they are files that have been published on an online platform such as YouTube™ or Vimeo.

If this is your case, there are two ways to import a video:

1. You can use the Video/Audio Object

§Open YouTube™ and display the video you want to import.

§Click on the Share button (under the video's preview) to customize the video's URL and copy it (using the Copy command in the context menu or the CTRL+C keys) from the field.

§In WebSite X5, go to the page where you want to add the video and insert a Video/Audio Object, then open the window to create it.

§In Video/Audio Object | General, type the URL of the video on YouTube™ in the YouTube/Vimeo Video URL field.

§Set the Properties appropriately.

2.You can use the HTML and Widgets Object

§Open YouTube™ and display the video you want to import.

§Click on the Share button (under the video's preview) and then on the Add code button. Select the options you want and copy (using the Copy command in the context menu or the CTRL+C keys) the code shown in the field.

§In WebSite X5, go to the page where you want to add the video and insert a HTML and Widgets Object, then open the window to create it.

§Use the [image] button or the CTRL+V keys to paste the code you have copied from YouTube™.

When you insert a video from YouTube™ using a Video/Audio Object the original size is changed according to WebSite X5's settings. You will have more control over the size if you import videos from YouTube™ using the HTML and Widgets Object.

Click to expand/collapse How to create a custom poster for starting a video

The poster is a static preview image of a video. It often corresponds to the first photogram, but you can prepare your own front cover that invites visitors to click on it and watch your video.

With WebSite X5 you can, for example, create a poster with a mouseover effect and link it to open the video in a ShowBox window:

§Use an external graphic program to prepare the picture to use as your poster, remembering that you will need two versions: one for the "normal" state, and another for the "mouseover" state.

§In WebSite X5, go to the page you want to work on and insert an Image Object, then open the window to add the contents and import the "normal" file.

§In Image Object | Display select "Superimposed image" as the Mouse Over Effects and then import the "mouseover" file. The two images should have the same size, so it won't be necessary to align them.

§Complete your button by adding the link: go back to Image Object | General, click on [image] to open the Link window, select File or URL with ShowBox and enter the name of the video file to import.


How to work with the E-mail Form Object

Best Practices > Step 3 - Page Creation >

How to work with the E-mail Form Object

 Return to chapter overview
Show/Hide hidden text

Double-click on a E-mail Form Object that has been inserted in the page layout table, or select it and click on the [image] button, to open the E-mail Form Object window. Here, you can specify which fields to include in your e-mail form, how data is to be submitted and collected and the style of the form.

Click to expand/collapse How to compose an online registration form

When you're navigating in the Internet, you often come across pages where you are asked to fill in a form, that is then sent back to the site owner as an e-mail. These forms may be site registration requests, login and password requests to access Members' Areas, or they may be used simply for market research.

Click to expand/collapse

§Open the page you want to work on and insert a Text Object, which is useful for entering a title and/or an invitation to register, and then insert an E-mail Form Object.

§In E-mail Form Object | List click on the Add... button to open the Insert Field window and select Text field: insert "Name" as the Label, set the Width (%) to 50% and select the Set as Mandatory Field option. Confirm to create your first field that asks for the visitor's name.

§Repeat the procedure to insert a second Text field for the "Surname". Make sure there will be enough room in the row for the "Name" and "Surname" fields to be side by side and that the Display on the same row as the previous Field option is selected.

§Use the List field for the Male/Female question, or a field in a Drop Down List or Single Choice.

§When you have entered the "M/F" Label, create the list of possible replies: click on the Add button to add the "Male" and "Female" options. You can also indicate the Number of rows that are visible.

§Use the Date field for the date of birth.

§Choose the format for the date (with the Date Format option) so that the visitor's entry will be accepted. To make things easier for the visitor, you can select the Display 'Calendar' icon option: when the mouse is on the icon next to the field, a calendar will be displayed and the visitor can select the date from it, without having to type it.

§Use a E-mail Address field for the e-mail address. Entries in this field will be checked automatically: they must have a @ character and a dot (.) in the text that follows it.

§Visitors who want to register will need a password, so add a Password field, give it a Label and make it mandatory.

§For greater security, you can ask the visitor to type his password a second time. Select the Request password confirmation option to create the password confirmation field, and the two passwords will be compared automatically.

§At the bottom of the form, you should insert an Agreement Conditions field to display conditions of use that the visitor must agree to when he registers.

§Give the field a Label and insert the Agreement Text: the Program automatically adds the "Accept" button.

§To limit the amount of spam you receive, you can select the Enable 'Captcha' anti-spam filter option: a series of distorted letters and numbers are shown at the end of the form, and the visitor must copy them correctly in the space provided in order to send his form.

The Send and Reset buttons (for sending the compiled form and for deleting all the information added to the form) are added automatically by the program at the bottom of the form.
Click to expand/collapse How to give more information on fields

If you think a field's label is not sufficiently clear to avoid visitors making mistakes in filling in the field, you can include a note with further details.

Click to expand/collapse

§In E-mail Form Object | List, double-click on the name of the field in the list to open it in the Insert Field window.

§In Insert Field | Options type the Field Description. This text will appear in a note when the mouse passes over the field's icon.

§If you want to change the icon for the note, use the Field Description icon file option in the E-mail Form Object | Style window.

§Use the options in the Styles and Models | Tooltip window to define the style, color and text format in the note.
Click to expand/collapse How to collect submitted data

Data that is submitted in online forms has to be transmitted to the Site Administrator. Usually, this data is sent by e-mail. Each time a visitor fills in a form and presses the "Send" button, the data is added to an e-mail which is sent to a specific address.

§In E-mail Form Object | Send, set Send data by e-mail as the Data submission method.

§Use the options for Data submission to define the settings and contents of the e-mail that is sent to the Site Administrator.

§Use the Sender e-mail address to indicate the sender of the e-mail as the visitor, and specify which field the e-mail address is to be taken from. This means the "Reply" command of the e-mail program can be used to reply to the visitor.

§Specify the User e-mail address, which is the e-mail address where the Site Administrator will receive the e-mails, the Object and the Message.

§Select the Include the collected data in CSV format option so that the submitted data is included in the e-mail in .CSV format (so it can be read in programs such as Microsoft Excel).

E-mails containing data submitted through online forms are created automatically by the Program. Use the options in Styles and Models | E-mail to define the style of these e-mails.
Click to expand/collapse How to collect submitted data in a database

If you think your online forms will be filled in by a large number of visitors, using e-mails to collect the submitted data may not be the most convenient solution: the Site Administrator will have to spend too much time organizing submitted data and replying to the e-mails. You may prefer to have the data sent directly to a database: in this way, the data is entered automatically in the tables and is ready to be treated.

§In Step 4 - Advanced Settings, click on Data Management to create the list of databases linked to the current project.

§Click on the Add... to open the Database Settings window and give the parameters for identifying the database.

§Go back to Step 3 - Page Creation, select the E-mail Form Object to work on and open the E-mail Form Object | Send window.

§Set Send data to a Database as the Data submission method.

§Select the Database Name from the list: this list includes all the databases that have been linked to the project in Data Management.

§Specify the Table Name of the database to use.

§Select the Send an e-mail to notify the data has been received option and enter the Site Administrator's e-mail address in the User e-mail address field so that he will be notified when new data arrives.

E-mails containing data submitted through online forms are created automatically by the Program. Use the options in Styles and Models | E-mail to define the style of these e-mails.
Click to expand/collapse How to send automatic replies to visitors who submit forms

When a visitor fills in an online form and submits his data, he expects an acknowledgment that his data has been received: a confirmation e-mail is a way of thanking him for his time, and reassuring him that his information is being treated.

To create an automatic reply:

§In E-mail Form Object | Send select the Send a confirmation e-mail to the user option.

§Give the e-mail of the Site Administrator in the Sender e-mail address field and specify which field in the form contains the entry for the User e-mail address (which is the e-mail of the visitor).

§To complete the confirmation e-mail you must specify the Object and write the Message.

§You can also select the Include the collected data option to remind the visitor what information he gave.

It is a good idea to add a thank-you page to the e-mail, rather than just sending the recipient to the Home page.

§In Step 2 - Sitemap Creation create a new page and add the necessary contents.

§Select the Confirmation page in the website Map and click on the [image] button so that this page is invisible during normal website navigation.

§Go to Step 3 - Page Creation, select the E-mail Form Object to work on and open the E-mail Form Object | Send window.

§Click on the [image] button of the Confirmation page after sending data option to open the Map and select the Confirmation page you have prepared.

E-mails containing data submitted through online forms are created automatically by the Program. Use the options in Styles and Models | E-mail to define the style of these e-mails.
Click to expand/collapse How to change the style of an online form

When you have created your form and indicated the send methods for submitted data, you can work on the style of the form to make it more attractive but also more functional, and so maybe increase the number of visitors who fill it in.

§Select the E-mail Form Object to work on and open the E-mail Form Object | Style window.

§Select the Form Item to work on (from the dropdown list or from the preview) and define the settings: text formatting, pictures, and colors.

§For the Labels, for example, you can set the Font Type, the Color color of the text and whether the fields are Repeat.

§For the Send' and 'Reset' buttons, you can also import a Background Image to make them more attractive.

All the changes you make are shown immediately in the preview.

When you preview your website, a message reminds you that e-mails with submitted data will not be sent. The Send E-mail Form feature only works fully when the website has been published on the Server.


How to work with the Products List Object

Best Practices > Step 3 - Page Creation >

How to work with the Products List Object

 Return to chapter overview
Show/Hide hidden text

Double-click a Products List Object that you have inserted in the page layout table or select it and click on the [image] button to open the Products List Object window. Here, you can create a list of all the products that you want to present and indicate how each product card is to be displayed.

Click to expand/collapse How to indicate the products to include in a Products List Object

You can present a variable number of products in a single Products List Object. You don't have to establish this number before you start: a product card will be created for each product you add to the list, and each card will be added to the same page.

§After you have created the Product Catalog in Step 4 - Shopping Cart, go back to Step 2 - Sitemap Creation, select the page to work on and insert a Products List Object in a cell in the page layout table.

§Double-click on the inserted object to open the Products List Object | List window

§The Category and Product List shows all the products in the e-commerce shopping cart, ordered by category. You can:

-Click (to tick) each product you want to include in the list.

-Click on a category to automatically include all the products in it. If you subsequently add new products to the category, these will be automatically added to the Products List Object.
Click to expand/collapse How to define the style of the product cards

Every product in a Products List Object is presented on a card created automatically by the Program. You can define the style of these cards:

§Open the Products List Object | Settings window and choose the Display Mode. For example, if you choose Image and Text, the product's picture will be displayed on the left and the information on the product will be on the right in all the cards.

§Use the options available for indicating proportions, colors, margins and borders.

§Indicate whether the cards will include elements such as the price and quantity.

The cards created by the Products List Object are a quick and efficient way of presenting the products in your catalog of the online store. Alternatively, you can create the product presentation pages manually, but don't forget to add the "Buy now" button.

Best practices:

-

How to create an e-commerce shopping cart


How to create and use anchors

Best Practices > Step 3 - Page Creation >

How to create and use anchors

 Return to chapter overview
Show/Hide hidden text

An anchor is a reference to identify the position of an object in a page: they are used to set up links directly to the object from any other point in the website.

There are no limits to the number of anchors you can add to a page: theoretically, there is one anchor per object. To simplify your work, you are advised to place an anchor on an object only when this is strictly necessary, and give anchors names by which you can identify them easily.

Click to expand/collapse How to create internal links to pages using the anchors

It's often useful to set up links which highlight particular elements when scrolling the page: you may want to write a short summary at the beginning of a page with links that take the visitor directly to the paragraph that interests him.

Click to expand/collapse

§In Step 3 - Page Creation create the pages, inserting all the objects you need to complete the page contents: insert a text object at the beginning for your summary, and then other text objects for each paragraph to create a link to.

§In the page layout table, select the Text Object for the first paragraph and click on the [image] button to give it an anchor: give the anchor a name in the window that opens.

§Do the same for each Text Object you have inserted, making sure the anchor names are clear.

§Double-click on the Text Object of the opening summary, to open it in the editor.

§Select the first item in the summary and click on the [image] button to open the Link window: select the Website Page option and use the [image] button to display the website Map and select the page to work on. Click on the Internal Page Anchor field to display all the anchors available and select the one that identifies the contents in the summary item.

§Repeat this operation for all the other summary items you want to create a link for.

You can improve navigation for visitors by adding a link at the bottom of each paragraph that takes them back to the top of the page:

§With the [image] button, add an anchor to the Text Object that corresponds to the initial summary.

§Open the Text Object in the editor to edit the first paragraph and add a caption such as " Back to top" at the bottom of it.

§Select the item "Back to top" and click on the [image] button to create a link with the page, making sure that you indicate the anchor associated with the summary.

§Repeat the operation to add the "Back to top" item at the bottom of each paragraph.

Instead of the "Back to top" item, you could use a button or add an image in the Text Object, or use an Image Object (in this case, you can use the mouseover effect): in any case, the procedure for creating the link is the same.

Click to expand/collapse How to manually create and manage anchors

If you need to place an anchor inside a text, and not at the beginning, for example next to a paragraph of a Text Object, you can do so in two ways:

1. Split the original Text Object into two separate text objects, and you will place the anchor on the second one.

2. Manually create an anchor in the Text Object.

§Open the Text Object in the editor and click on the [image] button to activate HTML code recognition.

§Move the cursor to where you want to place the anchor and type <A NAME="anchor_name">&nbsp; </A>

Instead of the "anchor_name", you have to write the name that you really want to give to the anchor. In the example, "&nbsp;" means that a blank space will be added after the <anchor_name> tag so that the name you give is clear.

When you create a link to an anchor you must remember that manually-created anchors are not included in the list shown by the Internal Page Anchor option. So you must proceed as follows:

§In the Link window, select File or URL.

§In the Internet file field, type #anchor_name where you type the name you really want to see in place of anchor_name.


How to work on the Cell Style

Best Practices > Step 3 - Page Creation >

How to work on the Cell Style

 Return to chapter overview
Show/Hide hidden text

When you are working on the Page Creation, and you have dragged an object to a cell in the page layout table, you can define the style of the cell, clicking on the [image] button and using the options in the Cell Style window.

Click to expand/collapse How to create a background image that adapts to the cell size

You can customize the style of a cell in various ways: one way is to import an image (a file in .JPG, .GIF or .PNG format) and use it as the background for the cell. Depending on the type of image that you import you will have to choose the Image background option and give settings for the Repeat and Alignment options, or use the Fit to Cell background option to find the best result.

Example 1

The imported image has the same size as the cell.

Background: Image background

Repeat: Do not repeat

Alignment: Upper left

Click to expand/collapse

Example 2

The imported image is not a pattern: there is no horizontal or vertical meeting point when two or more identical parts are placed side by side.

Background: Image background

Repeat: Repeat in both directions

Alignment: Upper left

Click to expand/collapse

Example 3

The imported image is a frame that has to adapt to cells of varying sizes.

Background: Fit to Cell background

Block width / Block height: set the best size for the blocks.

Click to expand/collapse

To better understand how the Fit to Cell background option works, what blocks are and how to give correct sizes, consider the folllowing pictures:

Picture 1 | Picture 2 | Picture 3

The original picture (Picture 1) is an elaborate frame that can easily be cut into blocks and be adapted to any size: the ornamental parts in the corners are a fixed size and the shading can be repeated as a pattern without abrupt changes in color.

In Picture 2, you can see the blocks whose sizes have to be specified (in the Block width and Block height options). The width and height is the same for all the blocks and is given as a percentage of the original picture: it can vary from 5% to 45%. The cut in the example is 35% for both width and height: this value ensures that each block includes the corner element.

Picture 3 shows how it is possible, from blocks A, B, C and D of the original, to obtain 5 other blocks, a, b, c, d and e: these are the blocks that the Program cuts to obtain all the parts of the picture that are necessary to complete the background of the cell. Blocks A, B, C and D are maintained unaltered and placed at the corners of the cell, and the other five blocks, a, b, c, d and e, are repeated to fill the rest of the space.

The Fit to cell Background is, therefore, very useful for adapting the same picture to fit cells of different sizes.

Click to expand/collapse How to use the cell style library

You can save time with the Library: if you need to apply the same style to several cells, you can define it for one cell, save the style and then apply it to all the others.

To create a new style:

§In the page layout table, select the cell you want to work on and click on the [image] button to open the Cell Style window.

§Use the available options in the Style and Text sections to obtain the look you want.

§open the Library section and click on the Add button: a new style is created according to your settings. A preview of the style you have created is added to the list of Custom styles.

To apply a style to a cell:

§In the page layout table select the cell you want to work on and click on the [image] button to open the Cell Style window.

§Go to the Library section and select the preview of the style you want to apply, choosing it from the list of Presets styles or from those in the Custom list.

§Click on the Apply button.

Further information:

-

The Box Model in WebSite X5


How to create a multi-language website

Best Practices > Step 4 - Advanced Settings >

How to create a multi-language website

 Return to chapter overview
Show/Hide hidden text

Internet breaks down all national and international boundaries and if you think your website may be visited by people from other countries, you should consider offering your website in a choice of languages.

Managing a multi-language website does make a project more complex but, thanks to the features that are available in WebSite X5, and if you can reply on a good quality translating service, the result will make the extra work well worth the while.

First of all, you should remember that WebSite X5 generates all the HTML files for the website pages in UTF-8 code (Unicode Transformation Format, 8 bit), to allow full support for all languages, including those which use non-Latin alphabets, such as Greek, Cyrillic, Coptic, Armenian, Hebrew, Arabic, Chinese, Japanese and Korean. Not only can you have websites in different languages, but you can also have text in different languages in the same website, and all characters will be displayed correctly: you can have an extract in Russian with its translation next to it in English.

When you are creating your website, WebSite X5 asks you to associate a language with your project (in the Content Language option of the General Settings | Basic window): this is essential for a correct handling of text that is added automatically by the Program. A number of languages are included by default, and you can add others in the Language Content Management window, clicking on the [image] button to create/import new languages or change some words for those that are already included (see How to translate text that is entered automatically).

With WebSite X5 you can create a multi-language website and give the visitor the choice of which language he wants to use. All you have to do is create a project for each language that you intend to offer, and connect them together as though they were different sections of the same website. You can use the Welcome Page or add a link in the template's header to offer a choice of languages.

Click to expand/collapse How to create a multi-language website using the Welcome page

Imagine you want to create a website in English, Italian and Portuguese. You can use the Welcome Page to add the buttons with which visitors choose the language they prefer.

§First of all, create your website in English, defining the structure and contents, and in General Settings | Basic set "EN = English" as the Content Language.

§In Step 4 - Advanced Settings click on the Welcome Page button and, in the window that opens, select the Show the Welcome Page option, specifying the picture/animation to use as the Page Background and giving all the necessary settings to obtain the style you want.

§Click on the Show links to other Languages option to create the language choice buttons.

§Use the available commands to make up the Language List. Select "Deutsch", "Español" and "Français" as unavailable languages and click on the Remove button. Then click on the Add... button to open the Language Settings window and add Portuguese: type ""Português" as the Language name to show and import a file for the picture to associate with it (this is often the nation's flag).

§Select "English" and "Italiano" and click on the Edit... button to open the Language Settings window and add the pictures for the flags for these languages.

§As the current project is in English (the only language associated with the Welcome page), select "English" from the Language List and click on the Current button.

§Use the Move up / Move down buttons to put the languages in the order you prefer.

When you have added the pictures for the flags, you have to set up links on them. A website will be created for each language, and published online, so you can create a link with a URL:

§In the 'Language List window, select "Italiano" and click on the Edit... button to open the Language Settings window.

§Click on the [image] button for the Link for this Language (ie: show the WebSite in this language) option and then select File or URL in the Link window and enter the URL for your website in Italian: for example http://www.mywebsite.com/it/index.html, if you are going to publish the Italian site in the "it" subfolder of the main folder on the Server.

§Repeat the same operations for your website in Portuguese, linking it to the relative URL: for example, http://www.mywebsite.com/pt/index.html, if you are going to publish your Portuguese website in the "pt" subfolder of the main folder on the Server.

Now your website is ready for the choice of languages, but you still need the contents in Italian and Portuguese.

§Make a copy of your English website to speed up the creation of the site in Italian: in the first Project Selection window, select the website project in English and click on the Duplicate button. Then click on the Rename button to change the name to that of the new project in Italian.

§Open the copy of the project and, in General Settings | Basic, set "IT - Italian" as the Content Language: translate all the text and any other elements that depend on the language.

§In Step 4 - Advanced Settings, go to the Welcome Page window and deselect the Show the Welcome Page option.

§When you have completed the project in Italian, do the same for your website in Portuguese.

To publish the websites on the Server, you have to follow this procedure:

§Publishing the website in English: the website in English is the one associated with the Welcome page, and is defined as the "default" website. When you publish the website, an index.html file will be created, that corresponds to the Welcome page, and it will be saved in the publishing folder. You will need to create "it" and "pt" subfolders on the Server so that the URLs for these sites work.

When you have finished this part, the English website will be online, and the links in the Welcome page to the other languages will be active, even though they do not actually go anywhere at the moment.

§Publishing the website in Italian: the link in the Welcome page of the English website will only work if you publish the Italian website in the "it" subfolder you have created on the Server.

§Publishing the website in Portuguese: the link in the Welcome page of the English site will only work if you publish the Portuguese website in the "pt" subfolder on the Server.

When you have published all three websites in the correct subfolder, the buttons in the Welcome page will work correctly and visitors will be able to choose which language they want to visit the site in.

You can use the Link for this Language (ie: show the WebSite in this language) option in the Language Settings window to associate any type of action to the pictures representing the various languages (usually an image of that nation's flag). This means that, instead of having to link an entire site, as we saw in the example, you can link just one page or a message to say that the site in a particular language is not yet available, but it will be soon, or a PDF document with all the information that you want to give on a language, or anything else.
Click to expand/collapse How to create a multi-language website using buttons in the template's header

If you want to create a website that is available in English, Italian and Portuguese, instead of using the Welcome Page window, an alternative, or complementary, way to do this is to put the language choice buttons in the website template's header. This method has the advantage that visitors can change the language they are using at any time, and from any page in the website.

§First of all, you have to create the website in English, defining the structure and contents, and in the General Settings | Basic window set "EN - English as the Content Language.

§Open the Edit Graphic Template window to work on the header and create the buttons so visitors can choose the language they want to use.

§Using the [image] Insert Image button, import the graphic file for the Union Jack: if you want a button with mouseover effect, use the Image File on mouse over option to import a second image, slightly different from the first.

§Repeat this procedure to create the buttons for the Italian and Portuguese flags.

§Select the button for the Union Jack and click on the [image] Apply a Link command: in the Link window that opens, select File or URL and then select the Internet file option, typing the address at which the Home page of the Italian website can be found when it is online (for example http://www.mywebsite.com/it/index.html).

§Repeat the same procedure for the Portuguese button, linking it to the relative URL (for example http://www.mywebsite.com/pt/index.html).

As you are working on the project for the English website, you don't have to add any link to the button with the Union Jack.

§Make a copy of your English website to speed up the creation of the site in Italian: in the first Project Selection window, select the website project in English and click on the Duplicate button. Then click on the Rename button to change the name to that of the new project in Italian.

§Open the copy of the project and, in the General Settings | Basic window, set "IT - Italian" as the Content Language: translate all the text and any other elements that depend on the language.

§Go to the Edit Graphic Template window and complete the button/flag links: associate the link on the English flag with the relative URL (for example http://http://www.mywebsite.com/index.html) and remove the link on the button with the Italian flag.

§When you have finished working on the Italian site, you have to repeat the same procedure for the website in Portuguese. remember to set the links on the buttons to the English and Italian languages, and remove any links to the Portuguese language.

All three websites must be published on the Server for the language-choice buttons to work correctly.

§Create two subfolders on the Serve, in the main publishing folder, and call them "it" and "pt".

§Publish the project in English (the main - default - language) in the main folder on the Server, and the projects for the Italian and Portuguese websites in the "it" and "pt" subfolders, respectively.

Best practices:

-

How to translate text that is entered automatically


How to include adverts in your website

Best Practices > Step 4 - Advanced Settings >

How to include adverts in your website

 Return to chapter overview
Show/Hide hidden text

It's normal to visit websites that include lots of advertizing, as well as the actual contents. Adverts are often banners or video-trailers that open in popup windows, and there are many other forms.

Adding adverts to sites, especially those that have a lot of visitors, is an excellent way of earning money because, not only can you publicize your products but, above all, you can publicize those of others and be paid for the space and visibility you give to third parties.

In WebSite X5 there are a number of ways to advertize your own products: you can, for example, use the Image Object to add banners to a page, or use the options in Step 4 - Advertising Message. If, on the other hand, you adhere to a specific program (for example, Google AdSense) that publishes adverts that you are paid for according to a certain criterion (the number of hits, clicks, and so on) usually you have to add specific HTML code to your page. In these cases, in WebSite X5 you have to use the HTML and Widgets Object.

Click to expand/collapse How to add a banner to a page

A banner can be handled as a normal image and, as such, is inserted in a website page:

§In Step 2 - Sitemap Creation select the page you want to work on and, in Step 3 - Page Creation insert an Image Object in a cell in the page layout table.

§Double-click on the Image Object you insert and import the graphic file for the banner.

§Click on the [image] button to open the Link window and add a link to the banner: for example, you can link a specific page which may be in your website or a different one.

Click to expand/collapse How to add an animated banner to a page

A banner may be static or animated, with a series of images, one after the other. An easy solution is to save the banner as an animated .GIF file and follow the above procedure to include it in a page, using the Image Object. An alternative solution is to save the single images and use them to make a Gallery Object:

§In Step 2 - Sitemap Creation select the page to work on and go to Step 3 - Page Creation to insert a Gallery Object in a cell in the page layout table.

§Double-click on the inserted Gallery Object, select the Classic Slideshow, making sure you deselect the Show Control Bar option, and import the list of graphic files you have prepared to create the banner.

§Select the inserted images to define entry and transition effects, and any necessary links.

Click to expand/collapse How to add an animated banner to the website's header

The header in the template is often a good place to insert an animated banner, because it can be used to give a preview of the products you are offering on your website. WebSite X5 proposes the Slideshow object for this feature:

§In Step 1 - Edit Graphic Template, in the Header section, click on the [image] button to insert a Slideshow Object, and import the images you need to create the banner.

§When you have created the list of images, select each one and click on the Effect... button to open the Effect Properties window:

·use the options in the Effect Type and Zoom and Position sections to define the fade and/or position and movement effects;

·use the Map in the Page section to specify the pages in which each image of the banner is to be displayed.

§Select one image at a time and click on the [image] button to open the Link window and add a link to an internal page, for example.

Click to expand/collapse How to add a banner as the background of the browser window

Some portals use alternative methods of advertizing, and one of these is to display a large picture directly as the background of the browser window. You can use this feature with WebSite X5: the procedure to follow depends on whether you intend to define this feature for the whole site or only for specific pages.

To set a background image for the whole site:

§In Step 1 go to the Custom Template window. Remember that this feature can also be used with default templates: in this case, you need to make a copy of the template first, to keep the original unchanged.

§In the Page section list, select the Page Background and import the Image File for the banner you are going to use.

§Use the available options to set alignments and margins.

To set a background image for a specific page in the website:

§In Step 2 - Sitemap Creation select the page to work on and click on the Properties... button to open the Page Properties window.

§Go to the Graphic section and, in WebSite Background for this Page only, import the graphic file for the banner you are going to use.
Click to expand/collapse How to display an advert in a popup window

If you want an advert to be displayed in a popup window when a visitor opens the Home page (it will be superimposed over the Home page), you need to:

§In Step 4 open the Advertising Message section and select the Show the Advertising Message option.

§Select the Message Type, choosing between Show ads on the top right corner, Show ads in a box and Show ads in a horizontal bar.

§Import the graphic file for the banner you are going to use and define the settings for it.

§Add a link to the banner, choosing the Link.

§Specify whether the banner is to be displayed only on the Home page, or on all the website pages.
Click to expand/collapse How to enter Google AdSense code for an advert

Once you have signed up to Google AdSense, or another similar program, and have received the necessary code to include an advert in your pages, you have to:

§In Step 2 - Sitemap Creation select the page to work on and go to Step 3 - Page Creation where you have to insert an HTML and Widgets Object in a cell in the page layout table.

§Double-click in the HTML and Widgets Object you have inserted and copy the HTML code into it.

HTML code for adverts can also be added to the header/foot of the website's template, using the [image] Insert HTML Code command (see Edit Graphic Template).


How to manage logins and create a Members' Area

Best Practices > Step 4 - Advanced Settings >

How to manage logins and create a Members' Area

 Return to chapter overview
Show/Hide hidden text

You often come across websites where you don't have free access to all the sections: to be able to view the contents in certain parts of the website you need to register and obtain a login and password to enter these restricted areas.

A classic example of of this kind is a company site, where access to the Members' Area is reserved for salespeople and partners to view material and price lists, or portals that require login access to contents that can be downloaded.

WebSite X5 offers the possibility to create a Members' Area in your website, with a number of Locked pages, and access is managed through administrator and user groups.

To explain the theory, let's consider working on the website of a voluntary association that organizes various projects through a Central Coordination Team and a number of specific Committees. The institutional part of the website is open to the public, but the site also contains pages that are specific for each project, and can only be consulted by members of the committee that follow each one, and by the members of the Central Coordination team. there are 9 volunteers organized as follows:

Central Coordination team | Project A committee | Project B committee | Project C committee
Member 1 | Member 1 | Member 1 | Member 1
Member 2 | Member 4 | Member 6 | Member 8
Member 3 | Member 5 | Member 7 | Member 9

Member 1 is part of the central Coordination team and is also a member of each committee.

You have to first create the website Map and add contents to the various pages before you can define a Members' Area and manage the profiles of the users who will have access to Locked pages.

Click to expand/collapse How to define users and groups with access to Locked pages

On the basis of the organization chart above, we need to create nine users with access credentials, and organize them into groups.

§In Step 4 - Advanced Settings, click on Access Management.

§In the Groups and Users who can access to the Locked Pages table, the Administrator group, with an Admin user, and the User group, with a User1 user, already exist by default. Select the User group and use the New Group command to create the groups that will be named "Central Coordination team", "Project A committee", "Project B committee" and "Project C committee".

§Select the "Central Coordination team" group and click on the New User button to open the New User window, where you can create the "Member 1" user. Type "Member 1" for the First and Last Name option, give it a Username and a Password and select the most appropriate Entrance Page.

§Repeat this procedure to create usernames for all the members, and position them in the correct groups.

§The "Member 1" user belongs to all the groups: in this case, select him and click 3 times on the Create Alias command to create 3 aliases for this user. Select each alias and drag&drop it in each group.

Click to expand/collapse

Click to expand/collapse How to create the access page to the Members' Area

The access page is the page a visitor is re-directed to when he tries to access a Locked page without authorization. The access page is created automatically by the Program and includes a welcome message and the login and password fields: it may have a "Register" button, which takes the visitor to another page where he can request a login and password to access the Members' Area.

You can write the Welcome message that is displayed in the access page by selecting the option with the same name in the Access Management window. This text should welcome the visitor and explain that he is trying to access reserved contents. He should be invited to give his login and password, if he has already registered, or to register to obtain them.

A visitor should be able to register in two ways::

1.Add an e-mail address in the Welcome message to which he can send a request for a login and password. The address is automatically recognized by WebSite X5 , that starts a connection with the default e-mail program.

2.Create a specific page with a form (see E-mail Form Object) that the visitor must fill in to register and then receive a login and password. When you have prepared the page, go back to the Access Management window and click on the [image] button for the Registration Page option to select it. The Program will then automatically create the "Register" button and add it to the access page, next to the Login button.

Click to expand/collapse How to create Locked pages

When you have defined the list of users, with their relative credentials, you can specify which pages in the website are to be locked, and who has access to them.

§In Step 2 - Sitemap Creation select the first of the pages to be locked and click on the [image] button to open the Locked Page window.

§Select the "Set Page as Locked" option and then tick each user and group who can access it. Locked pages are indicated on the website Map by the [image] icon. Locked pages may or may not be displayed in menus, according to whether you select the Hidden Page in the Menu option or not.

§Repeat this procedure for all the pages you want to lock, deciding which users/groups to give access to for each of them.

Click to expand/collapse

Click to expand/collapse How to define access parameters for the Administrator

WebSite X5 lets you manage, not only user profiles, but also those of the Administrators. by default, there is only one Admin administrator user in the Administrator group.

§To change the name and credentials of the Admin Administrator, select the name in the Groups and Users who can access to the Locked Pages list and click on the Edit... button to open the User Settings window.

§To create new administrator profiles, select the Administrator group and click on the New User to open the User Settings and enter the necessary information.

The administrators, unlike normal users, can access all the Locked pages in a website and, with the same credentials, they can also access the online Control Panel to view comments to posts in theBlog, messages in the Guestbook and diagnostic and optimization information on the website for search engines.

When the website is published, each time a visitor tries to access a Locked page, he will be asked for a login and password. If these parameters are entered correctly, the Locked page will be displayed: by default, the time available to enter these parameters is five minutes. The time starts again each time a Locked page is linked to.

When you test your website offline, a warning message will tell you that the locked pages will be displayed without requesting access. The Members' Area will be fully operational only when the website is published on the server.


How to handle comments from the online Control Panel

How to handle comments in the Blog and Guestbook from the online Control Panel

Best Practices > Step 4 - Advanced Settings >

How to handle comments in the Blog and Guestbook from the online Control Panel

 Return to chapter overview
Show/Hide hidden text

A Blog is a sort of online diary where you can post articles of any kind, and give visitors the possibility to leave comments. If your reader community is active and stimulated by the various posts, then interesting discussions may develop.

Click to expand/collapse How to configure post management in WebSite X5

If you want visitors to be able to leave comments on your posts, you have to configure your Blog, using the options in the Blog | Comments window:

§Select the Let readers add Comments to your Blog option.

§Specify the path of the Server folder with write access, which is the folder that PHP code can write to.

§Decide whether to activate the anti-spam "Captcha" filter when comments are made.

§Specify the User e-mail address, which is the e-mail address that will receive notification that visitors have left comments.

§Specify whether comments can be published immediately online, or whether they have to be approved first.

When you have done this, you can add posts and publish your Blog. A form is added automatically to the bottom of posts, where visitors can write and send their comments. This form asks for a name, an e-mail address, a website and a message. all the fields are mandatory, except for the website field.
Click to expand/collapse How to handle comments from the online Control Panel

When you have configured how comments to the Blog are to be handled, when a visitor leaves a comment, a notification e-mail will be sent to the specified address (to the website Administrator, usually). If you have selected the Show Comments after Admin approval option, comments have to be approved before they are published online and WebSite X5 has a command for this in the online Control Panel.

The Control Panel can be found at the http://www.mywebsite.com/admin URL, where http://www.mywebsite.com is the website to which the Blog is linked, and it is available to all the users in the Administrator group, who have been added in the Access Management section of Step 4 - Advanced Settings.

There are two dropdown menus in the Blog section of the Control Panel, and they show a list of the categories and the posts linked to them. You can choose the post you want to view the comment on. A list of the comments gives the name of the author, his e-mail address, the text of the comment and the date and time it was made. If the author has a website linked to his name, this link is automatically activated.

To handle comments, you have to:

§Go to the online Control Panel and log in, then open the Blog section.

§Identify the post you want to view comments on, using the dropdown menus that show the list of categories, and the posts in them.

§Scroll the list of comments and use these commands to handle them:

-Delete: to remove a comment: it will not be published on the Blog and it will be deleted from the list of comments in the Control Panel.

-Approve/Disapprove: to approve a comment and so have it published on your Blog, or disapprove a comment and so remove it from the list of posts on the Blog. A disapproved comment is not deleted from the lists in the Control Panel.

It is absolutely necessary to be able to manage what comments are displayed on your Blog, in guard against spam and to moderate discussions, removing offensive or otherwise inappropriate content.


How to create an e-commerce shopping cart

Best Practices > Step 4 - Advanced Settings > The e-commerce shopping cart >

How to create an e-commerce shopping cart

 Return to chapter overview
Show/Hide hidden text

With WebSite X5 you can transform your website into an incredible work place, for example, by adding an e-commerce shopping cart to sell your products/services directly online.

Imagine you have to create a simple e-commerce shopping cart to sell items of clothing. To make things easy, we'll deal with just a few items, organized in a couple of categories. Orders may be sent by mail or by express courier, and we will accept bank transfers and credit card payments. Obviously, with WebSite X5 it is possible to handle a much more complex product catalog, with many more methods of shipment and payment.

All the options for configuring an e-commerce shopping cart are available in the Shopping Cart section of Step 4 - Advanced Settings. Once you have set up your shopping cart, you can create an online catalog using the Products List Object.

Click to expand/collapse How to create a product catalog

The first thing to do when creating an e-commerce shopping cart is to create the product catalog. All the products for sale on your website are included in the catalog, and each has a complete and accurate description. If there are a lot of products, they are organized in categories.

§In the Shopping Cart | Products window, click on the New Category button to create the categories and subcategories you need. Categories are added directly to the table: they are just containers and have no particular properties. Just give them a name so that you can identify them easily.

§Select the category or subcategory to add a new product to, and click on the New Product button, then enter the requested information in the Product Settings window. When you confirm the information, the new product will be added to the category.

§Repeat these steps for all the products that you want to put on sale.

Click to expand/collapse

The Product Catalog can be imported, if it already exists in .TXT or .CSV format, or exported using the [image] and [image] buttons. For more information on Importing/exporting and how to create and manage the files with the Product catalog, see How to import/export products in the shopping cart.
Click to expand/collapse How to define shipping and payment methods

When you have created your Product catalog, you have to define the shipping and payments that the customer can choose from when making his order.

§In the Shopping Cart | Order Management window, the Shipping type List table proposes default values of "Post" and "Express Courier": select one at a time and click on the Edit... button to open the Shipping Type window and set the parameters.

§Click on the Add... button to define a new shipping method.

Do the same for the payment methods, using the Payment Type window. Payment methods also include PayPal and credit card. To select PayPal, for example, you have to:

§In Payment Type | General, specify a Name and a Description for the payment method;

§In Payment Type | Cost, select the Pay now option and set "PayPal/Credit Card" as the Payment Type. Enter your PayPal Account in the field and indicate the pages in the website that must be displayed to confirm payment or to indicate an error during the transaction.

§In Payment Type | Type, insert a description of the payment method that is suitable to be included in the order confirmation e-mail that will be sent to the customer when his order is received.
Click to expand/collapse How to define shipping costs based on the weight/total amount of the order

When you add a new shipping method you can specify a fixed cost or a variable cost, that depends either on the weight or the total amount of the order.

To create price ranges according to weight:

§Use the Weight option in the Product Settings | General window to give a weight to the products in the shopping cart catalog.

The Weight option does not specify a particular measure for the weight. Decide which is the best for your products and make sure you don't change it, to prevent errors in calculating shipping costs.

§In the Shopping Cart | Order Management window, click on the Add... or Edit... button, next to the Shipping type List table to open the Shipping Type and create a new shipping method or edit an existing one.

§In Shipping Type | Cost, select the Cost related to Total Weight option and click on the Add... button. Use the window that opens to specify the Total Weight which must be equaled or more than to apply the specified shipping Cost.

§Repeat these steps to set all the price ranges you want.

When you have set the prices for the products in the shopping cart (using the Price option in Product Settings | General) you can create the price range according to the total order value:

§In the Shopping Cart | Order Management window, click on the Add... or Edit... button next to the Shipping type List table to open the Shipping Type window and create a new shipping method or edit an existing one.

§In Shipping Type | Cost, select the Cost related to the Order's amount option and click on the Add... button. Use the window that opens to specify the Order's amount which must be equaled or more than to apply the specified shipping Price.

§Repeat these steps to set all the price ranges you want.
Click to expand/collapse How to compose the online form

Obviously, to make an order customers need to fill in a form, giving the payment and shipping details. The procedure to compose an order form as follows:

§In the Shopping Cart | Customer Details window, check in the Field List table the fields you can use. Select the one you want to work on and click on the [image] and [image] buttons to make it "visible" or "hidden, and "mandatory" or "optional".

§When you have decided how to compose your form, select the Show Shipping Data Form option to duplicate the fields which allow customers to give details if the payment data is different from the shipping data.

§Use the editor to write the Sales Terms and Conditions Text which customers must agree to in order to complete their order.
Click to expand/collapse How to compose the e-mails for the order summary and order confirmation

When a customer places an order, two e-mails must be sent from the shopping cart: the first is the order summary and goes to the Site Administrator, and the second is the order confirmation and it goes to the customer.

§In the Shopping Cart | Send order window, select Send data by e-mail and specify the E-mail Address for receiving Orders (the Site Administrator's e-mail).

§If you want to include the order details in .CSV format at the bottom of the e-mail, select the Attach Order Data in CSV format option.

§Write the Header Text and Footer Text which will be also used for the User's Order confirmation e-mail.

For more information on the order confirmation e-mail, see How to write an order confirmation e-mail.
Click to expand/collapse How to create the "Buy now" button

When you have define the e-commerce shopping cart, you need to create the pages that present your product catalog and allow customers to buy articles. Creating the "Buy now" button is easy:

§In Step 2 - Sitemap Creation select the page to work on and insert an Image Object in an appropriate cell in the page layout table.

§Double-click on the Image Object to define it: import the graphic file you want to use for the button.

§If you want, go to the Image Object | Display section and choose a Mouse Over Effects.

§In Image Object | General click on the [image] button to associate a link Link with the image.

§In the Link window, select Add to Cart. You can set up the link in two ways:

-if you want to open the product table, select the Show the Product List of the selected Category option and then select a category;

-if you want to add a product to the shopping cart, select the Add the selected Product directly to the Cart option and then select the product, specifying the Option, if available, and the Quantity.

Alternatively, the products can be shown in the Products List Object.

For more information on using the Product List Object, see How to work with the Product List Object.

When you test the website offline, a message warns you that the order will not be sent and you will be redirected automatically to the order confirmation page. The e-commerce shopping cart will be fully functional when the website has been published on the server.

Best practices:

- | How to import/export shopping cart products
- | How to define the contents of the order confirmation e-mail
- | How to work with the Product List Object


How to define the contents of the order confirmation e-mail

Best Practices > Step 4 - Advanced Settings > The e-commerce shopping cart >

How to define the contents of the order confirmation e-mail

 Return to chapter overview

When a customer completes an order, it is important that he receives confirmation of his order, so he can check that he has given all the correct information and consult the details on how to make the payment.

WebSite X5 automatically writes the order confirmation e-mail, taking necessary details from the order itself.

An order confirmation e-mail is made up as follows:

Introductory text
Description: | This is the text at the beginning of the e-mail. It should thank the customer for his order and summarize the contents that follow.
Example: | Dear Customer, Thank you for choosing our products. Below you will find a summary of your order, including your purchases, invoice data, shipping data and your preferred method of payment.
Specified in: | In Shopping Cart | Send order, in the Header Text field.
Customer details
Description: | This part of the e-mail repeats the invoice data that the customer entered in the order form.
Specified in: | The order form can be defined in Shopping Cart | Customer Details.
Order summary
Description: | This is a table that summarizes all the products that have been ordered: it gives the product quantity, partial total and total order value.
Specified in: | The table is created automatically, according to the order.
Payment method
Description: | This section must give the customer precise instructions on making the payment, according to the method he selected.
Example: | For "Bank Transfer": Payment must be in favor of: XXX YYY ZZZ Following payment, please forward us the order number and accounting copy of the Bank Transfer operation.
Specified in: | In the E-mail message section of the Payment Type window.
Shipment method
Description: | It should summarize the selected shipment method and give, if possible, indications on when and how the goods will be delivered, and any other information that may be useful.
Example: | For "Express Delivery Service": Shipment via Express Delivery Service. The goods will be delivered within 1-2- working days.
Specified in: | In the E-mail message section of the Shipping Type window.
Closing text
Description: | This is a standard paragraph containing the appropriate formal phrases for closing the e-mail.
Example: | If you have any queries relating to this order, please do not hesitate to contact us. Yours faithfully, Company Name
Specified in: | In Shopping Cart | Send order, in the Footer Text field.

Like all the other e-mails that are composed and sent automatically by the Program, the order confirmation e-mail has the graphic style defined in Styles and Models | E-mail.

A copy of the order confirmation e-mail is also sent in text format.

Best practices:

- | How to create an e-commerce shopping cart
- | How to import/export products in the shopping cart


How to import/export products in the shopping cart

Best Practices > Step 4 - Advanced Settings > The e-commerce shopping cart >

How to import/export products in the shopping cart

 Return to chapter overview

After creating an e-commerce shopping cart, it may be useful to export the product catalog to use in another project, or with other software, such as your accounting program. It is also just as important to be able to import a product catalog so that you don't have to recreate it from the beginning.

In WebSite X5 you can import/export product catalogs using the tool bar in the Shopping Cart | Products window. When you export a product catalog, a file in .TXT or .CSV format is produced, that can easily be opened and edited with any text editor (for example Windows Notepad) or Microsoft Excel.

Follow the indications below if you manually edit the exported product catalog file, or you create a new one to import:

§The first row must contain the field headings with these labels:

ID;Category;Name/Code;Description;Price;Enable VAT;VAT Value;Weight;Options;Enable Discounts;Discounts

§If you delete a field from the header, you will delete that data for all products. Mandatory fields (Category, Name/Code, Description and Price) cannot be deleted.

§Each row after the heading corresponds to one product.

§All the parameters must be separated by the ";" character.

§The following must be given for each product: Category name, Product name, Product description, Product price. All the other fields are optional and may be omitted (not writing anything between the ";" characters for the field in question).

§The product ID is generated by the Program: if you enter a new product, leave the ID field empty.

§Any spaces in the file will be removed when it is imported.

The parameters in a .TXT or .CSV file are:

Parameter: ID

Mandatory

No

Description

The product's unique identification.

Value

It is generated and associated with a product automatically by the Program.

If you update the .TXT or .CSV file of a previous export, do not edit the existing IDs, and leave this field empty for new products. When a catalog is imported, the Program checks against duplicate IDs and generates the necessary new ones.

Parameter: Category

Mandatory

Yes

Description

The category of the product.

Value

Use the ">" character to indicate the path of categories and subcategories.

For example, a T-shirt in the subcategory "Casual" of the category "Men's clothing" is indicated in the ,TXT or .CSV file :

... ; Men's clothing > Casual ; ...

You can add all the necessary subcategories in this way.

Parameter: Name/Code

Mandatory

Yes

Description

The name or code of the product.

Value

When the catalog is exported to a .TXT or .CSV file, this parameter is taken from the Name/Code field in the Product Settings | General window.

Parameter: Description

Mandatory

Yes

Description

The description of the product.

Value

When the catalog is exported to a .TXT or .CSV file, this parameter is taken from the Description field in the Product Settings | General window.

Parameter: Price

Mandatory

Yes

Description

The price of the product.

Value

When the catalog is exported to a .TXT or .CSV file, this parameter is taken from the Price field in the Product Settings | General window.

Parameter: Enable VAT

Mandatory

No

Description

Indicator of a specific VAT value for this product.

Value

When the catalog is exported to a .TXT or .CSV file, this parameter is taken from the VAT (%) option in the Product Settings | General window. This option is only available if Type "VAT included" is selected for the VAT settings in Shopping Cart | Availability. It is used to associate a specific VAT value to a product, that is different from the VAT value for the other products in the catalog. In these cases prices are given without VAT.

This parameter can have a value of 0, if the VAT (%) option is not selected, or 1 if it is.

Parameter: VAT Value

Mandatory

No

Description

The VAT applied to the price of a product with a specific VAT

Value

When the catalog is exported to a .TXT or .CSV file, this parameter is taken from the VAT (%) option in the Product Settings | General window which is only available if, in Shopping Cart | Availability the Type "VAT included" option is selected for the VAT settings.

If the VAT (%) option in the Product Settings | General window is selected but no value is given, the Default value (%) indicated in Product Settings | Availability is used.

Parameter: Weight

Mandatory

No

Description

The product's weight.

Value

When the catalog is exported to a .TXT or .CSV file, this parameter is taken from the Weight field in the Product Settings | General window.

Parameter: Options

Mandatory

No

Description

A list of possible product variations.

Value

When the catalog is exported to a .TXT or .CSV file, this parameter is taken from the Main Option List field in the Product Settings | Options window.

If you are creating a .TXT or .CSV file to import, the product variants in the list can be separated by the "|" character, as follows:

... ; Variant1 |Variant2 | Variant3 ; ....

All the necessary variants can be added in this way.

Parameter: Enable Discounts

Mandatory

No

Description

Indicator for bulk discount.

Value

When the catalog is exported to a .TXT or .CSV file, this parameter is taken from the Enable Quantity Discount option in the Product Settings | Discount window.

This parameter can have a value of 1 or 0, according to whether the Enable Quantity Discount option has been selected or not.

Parameter: Discounts

Mandatory

No

Description

The list of possible bulk discounts.

Value

When the catalog is exported to a .TXT or .CSV file, this parameter is taken from the Enable Quantity Discount option in the Product Settings | Discount window.

If you are creating a .TXT or .CSV file to import, the list of bulk discounts must be written as follows:

... ; quantity : discount | quantity : discount ; ...

So, if a bulk discount of 10% is applied to orders for more than 20 articles, and a discount of 15% is applied to orders for more than 50 articles, you would write:

... ; 20 : 10 | 50 : 15 ; ...

Use the "|" character to add all the necessary bulk discounts.

When you import a .TXT or .CSV file from a previous export operation or that you have written yourself, it will probably be updated by the Program, to adding missing IDs, for example. If you want an updated copy of the .TXT or .CSV file, you will have to re-export the product catalog. .

Best practices:

- | How to create an e-commerce shopping cart
- | How to write an order confirmation e-mail


HTML, HTML5 and CSS

HTML, HTML5 & CSS

Further information >

HTML, HTML5 & CSS

 Return to chapter overview
Show/Hide hidden text

A website is a collection of related pages that are interconnected through hypertext.

A web page can be static or dynamic. Static pages are hypertexts in HTML format, and dynamic pages use scripting languages.

Each web page has one or more URLs (Universal Resource Locator), which is a permanent link to be able to reach the page. The URL is the address that users type in their browser to display a page.

Click to expand/collapse HTML

HTML (Hyper Text Mark-Up Language) was developed in the 1980s by Tim Berners-Lee at CERN in Geneva, and it was used by researchers to use and share documents.

HTML is a public domain language, and the syntax is established by the World Wide Web Consortium (W3C): over the years it has been considerably revised, and the latest version is the 4.01, released in 1999. Following a period of inactivity, when the W3C concentrated mainly on the definitions of XHTML (HTML application of rules and syntax in XML style) and stylesheets (Cascading Style Sheet, CSS), work started again in 2007 to define HTML5, which is still in the draft stage but widely used.

As HTML is a mark-up language, and not a programming language, there are no means of interacting with it: it does, however employ markers, that are called "tags", which indicate how the various elements in a page are to be displayed.

HTML pages all have an identical structure:

§DTD (Document Type Definition) or "doctype".

The DTD passes the URL of the HTML specifications being used for the document to the browser, so that this knows which elements, attributes and entities can be legitimately used.

§Start <html> tag

§HEAD section

This section gives information that is not directly displayed by browsers, which indicate how the document is to be interpreted. the meta tags (including those for search engines), JavaScript script, stylesheets, etc. are included in this section

§BODY section

This section contains the actual contents of the document.

§End </html> tag

HTML has tags for many different formatting requirements and for many features. It is as well to remember, though, that it was conceived to define the logical content and not the final aspect of a document. Although it has long been used for the latter purpose, it still remains a language that should be used only to define a document's structure. Style sheets should be used to define a document's aspect.

Click to expand/collapse HTML5

HTML5 is an evolution of HTML 4.01 and introduces many new features, mainly aimed at separating a page's structure (defined by the tags) from its aspect (define by CSSs) and the actual contents. It introduces functions that, up until now, were implemented with non-standard methods, and it guarantees cross-browser compatibility, and web-based applications can be used in even the absence of the Internet. Although widely used, HTML5 is still in the draft stages, and the W3C has announced that it will be officially released in July 2014.
Click to expand/collapse CSS

Cascading Style Sheets (CSS) is a style sheet language for describing how a document written in a markup language (e.g. HTML and XHTML) are to look like (for example, fonts, spacing and colors). It was introduced due to the need to separate the contents from the formatting, so offering a clearer and easier programming, both for HTML page authors and the users.

The rules for creating style sheets are maintained in Recommendations that W3C has been publishing since 1996. the CSS 2 specifications are the natural evolution of CSS 1. They were first published in 1998, and CSS 2.1 in 2004. The CSS 3 specifications have not yet been published, although the W3C issues regular communications on the development progress.
Click to expand/collapse In WebSite X5

WebSite X5 automatically generates HTML5 code and uses CSS 2.1 or CSS 3 style sheets, according to browser support, to define how contents are to be displayed. The advantages of using this code are:

§adherence to international standards;

§ample compatibility with the main browsers;

§greater possibilities for a correct and complete indexing by search engines.

Pages are created so that they can be used even when the user has deactivated the CSSs during navigation. In this case, the pages are linerized, which means they lose some formatting and graphics but the contents are presented in sequential order and maintain internal links (skip links not otherwise visible), which make navigation easier.

Browsers provide the necessary commands to check whether CSSs have been disabled.

You can find more information on HTML, CSS, standards, code validation procedures and many other topics directly on the website of the World Wide Web Consortium (W3C): www.w3.org.


Web browsers and the WebSite X5 browser

Web browsers & the WebSite X5 browser

Further information >

Web browsers & the WebSite X5 browser

 Return to chapter overview
Show/Hide hidden text

A Browser is a program that lets users display and interact with the information (text, images, etc.) in a web page. The most widely-used browsers are Microsoft Explorer®, Firefox®, Safari® and Google Chrome™.

Browsers use a rendering engine to display web contents. A rendering engine is a program that downloads contents (an HTML page, for example) and formats the information on it (associated CSSs, for example) and shows them on the screen. Browsers use many different rendering engines, and these differ for the rendering quality, with respect to the standards, and speed. So, pages may appear differently according to which browser displays them. However, as a web page is not printed, a certain margin of difference is acceptable, if the user's experience is not damaged by this.

The best way to obtain web pages that are compatible with the main browsers, in their various versions, is to create a clean code that adheres to standards.

WebSite X5 automatically generates HTML5 code with associated CSS 2.1 or 3, and guarantees full compatibility with all the main browsers and mobile devices, such as mobile phones, tablets and smartphones.

Click to expand/collapse WebSite X5's built-in browser

When you are working on a project, you need to be able to check the final result and how the website will be displayed once it has been published. To do this, WebSite X5 provides a Preview button, that is always available (seeThe work environment), which gives you a preview of the website on your computer. It is constantly updated (see Keep Preview updated while working on the Project in the Preferenceswindow).

To display the preview, WebSite X5 uses its built-in browser, based on Chromium (http://www.chromium.org/), the open source browser that gives its name to Google Chrome™. This browser has the following commands:

Back

Return to the last page visited.

Forward

Go forward to a previously-visited page.

Home

Go to the website's Home page.

Address bar

This shows the path of the page on display and/or lets you enter the path of the page you want to display.

Go

This loads the page indicated in the path. You can also load the page by pressing the CR key.

Edit page

This goes back to the Program, opening the page displayed as a preview by the browser in the Page Creation window, so it can be edited. If the page is part of the Blog, the Members' Area or the Shopping Cart, this button takes you back to the relative section in Step 4 - Advanced Settings.

When the browser window is open to show the preview of the page you are working on, the page that is displayed changes automatically according to the page displayed in the main browser window.

Using a built-in browser to display a preview of the website under construction has the following advantages:

§the preview does not replace the website page displayed in the browser window;

§the preview of the website under construction is updated in the built-in browser's window and new windows in the default borwser are not opened.


Search engines and SEO optimization

Further information >

Search engines and SEO optimization

 Return to chapter overview
Show/Hide hidden text

Although we tend to talk generically about search engines, there are actually two different systems on the Internet:

§Web Directory

A web directory lists websites by category. The entries are found by people, and not by software ("webcrawlers"). Entries can be free or have a fee. Directories often use search engines as a source for incrementing their databases. Inclusion in a directory can be important as it improves positioning on search engines that the directories refer to (for example, an entry in Dmoz improves positioning on Google™).

Well-known directories are Yahoo, Virgilio, Arianna, Dmoz.

§Search engine

Search engines can be defined as databases of web pages. Even though it is possible to request site entry, it is usually the spiders (software that scans the web) that find entries, following chains of links that start from pages already present in the database.

A search engine works in three phases:

1.They analyze the web, using spiders (or crawlers or robots). Spiders, like browsers, have a limited ability to read a web page: they cannot read all parts of graphics, Flash animation, JavaScript code, or parts in ASP or PHP.

2.They catalog the information they retrieve, according to criteria that vary from one engine to another.

3.They reply to user requests. To give a reply, the engine must be able to judge the relevance of a page with respect to the request: they extract documents from the database that contain the keyword given by the user, and decide the page's relevance according to proprietary algorithms, constantly updated. The results are published in SERPs (Search Engine Result Pages).

The most well-known search engine is certainly Google™.

Click to expand/collapse How and why you should be present on the search engines

Internet provides an immense quantity of information, and statistics confirm that users use search engines to find the pages they are interested in. This simple consideration makes it clear how important it is to appear in search engine results (SERPs), and so it is of vital importance to provide appropriate keywords that identify your website.

Realistically, to obtain a good positioning in SERPs, you will need a complex long-term strategy and this depends on how much you are willing to invest and the results you hope to obtain.

The various choices and operations that concur to make and maintain the visibility of a website by a search engine are numerous, but some of the more important aspects are:

§The choice of keywords

By "keyword" we mean a word or group of words that the navigator may enter as a search string. To choose the most appropriate keywords you can work as follows:

1.Write an initial list of words that are pertinent to the topics in your website. Try to imagine what words a visitor would type to look for what you are proposing. Try and find out what keywords are used by other, similar websites, and with what results.

2.Analyze the statistics provided by certain search engines to identify the most common keywords.

3.Use Google™'s analytic tools to increase your list of keywords.

§Optimization

By optimization, we mean improving visibility of a website so that search engines find our pages more easily and more often, and so they appear more frequently in search results, and with a higher ranking (higher up in the list of results).

You need to order the keywords in a sort of pyramid, so the most important one is at the top, followed by a group of 2 or 3 that are slightly less important, and so on. Each page in the website must be optimized for a single keyword, with lesser optimization for the secondary keywords. Considering the entire website important, you should have a lot of pages with first-level keywords and fewer with second-level keywords.

Keywords can be used for tags, meta-tags and content.

§<Title> tag

This is one of the most important elements in achieving high search engine rankings. When Google™ starts searching, it first looks for the content of the <Title> tag and compares it to that of the contents in the page and links.

A good title must:

·not be longer than 2 - 4 words, and not more than 60 characters;

·contain the most important keyword, without being exactly the same as it;

·be coherent with the page and not the same for the entire site.

§<Description> meta-tag

This is often displayed along with the title in the SERPs, and statistics confirm that clicks on the top rankings are influenced by the description and how this manages to attract a visitor's attention.

A good description must:

·be a complete sentence;

·contain the most important keyword and some of the less important ones;

·be coherent with the page and not the same for the entire website;

·attract a visitor's attention and give relevant information.

§ALT attribute

The ALT attribute of the <IMG> tag provides alternative text to be used if the <IMG> image cannot be displayed for some reason (there is an error in loading it or the visitor is using a text browser or screen reader).

Images are not considered by search engines, but alternative text is.

To make the website more accessible, the alternative text should not be just a description of the image, but written as in integral part of the page content.

For optimization, the ALT attribute must:

·be a complete sentence;

·have the same subject as the page;

·be different from other ALT attributes;

·if possible, be pertinent to the image and the name of the image file;

·must contain the main keyword;

·should contain other keywords.

§Title Attribute

The Title attribute of the <A> tag indicates text that will be displayed in a Tooltip, which appears when the mouse passes over a link. The Tooltip explains what will happen when the link is clicked on: a new window is opened, a PDF file is displayed, etc.

To optimize the site, the Title attribute of the links should:

·be a complete sentence;

·be relative to the linked page;

·if possible, be on the same subject as the page;

·be all different;

·at least one in the page must contain the main keyword;

·most of the main keywords should be included in at least one Title attribute.

§<Keywords> Meta tag

This tag was originally important but, because it has been abused, the search engines no longer consider it so important.

A good <Keywords> Meta Tag should:

·include the main keyword of the page;

·include some of the second-level keywords;

·include only words in visible text, or in the images' ALT(ernative text);

·consist of no more than four key phrases, separated by a comma.

§Images

Images help define the subject matter of a page, and in any case they may be the results of a search.

For images, you should:

·choose a name that is pertinent to the image and the page;

·if possible, include the main keyword in the image's name;

·give each image a different name, that contain different keywords;

·follow the indications above for ALT;

·include the image in a part of the text that refers to the same subject matter.

§out-bound links

Out-bound links are links from a page to another website or a page in another website: they are important for optimization because they increase relativity to a subject. If used correctly, they link pages on the same subject matter, thus permitting users to extend their search to pertinent external documents.

The following rules should be observed when creating out-bound links:

·each page should contain a couple of out-bound links, and no more than 5 or 6;

·out-bound links should lead to pages on the same subject matter;

·the links must have an alternative text on the same subject matter as the linked page and, if possible, with that where the link starts from;

·at least one of the out-bound links in a page should contain the page's main keyword;

·the titles in the link must be relevant to both the start and finish pages of the link;

·the links must be periodically checked, to ensure that the finish page still exists;

·if possible, some links should be included in the page's text, to which it is relevant;

·out-bound links should never direct a visitor to illegal sites or spam-engines.

§The texts

The texts in a page are the most important element for optimization and ranking. Each page should deal with one subject, so increase its theme relevance. the text must be meaningful and at least 250 words long; 400 - 500 words are ideal. The keywords must be present in the text, but not repeated too often (key density): keywords of a single word should have a 10% density, keywords of two words can have a 15%-20% density. the main keyword must be repeated frequently, but without exaggerating (key stuffing). Overall, in a website, there should be more pages dedicated to the main keyword than there are dedicated to secondary keywords.
Click to expand/collapse In WebSite X5

The main advantage provided by WebSite X5 for improving indexing and SERP ranking lies in the code that the Program generates: WebSite X5 automatically generated pages in HTML5 and handles content in linked CSS style sheets. Search engines like this "standard compliance" code because spiders can easily interpret it.

WebSite X5 also permits you to intervene on the above-mentioned tags, meta tags and attributes to optimize page searches via the identified keywords. Moreover, WebSite X5 automatically creates and links the website's SiteMap with textual links to all the pages present in the website. The SiteMap is a precious instrument for the search engines because they can use it to reach all the pages in the website and index them.


WebSite X5's built-in Search Engine

How WebSite X5's built-in Search Engine works

Further information >

How WebSite X5's built-in Search Engine works

 Return to chapter overview
Show/Hide hidden text

WebSite X5 offers you the possibility of adding a search field to the Header / Footer of the template (see Edit Graphic Template | Insert Search Field), so that your visitors can use the built-in Search Engine to look for things in your website. The Engine will search pages, images, videos, products in the e-commerce shopping cart and the Blog: the results of the search are ordered by relevance and displayed in pages created automatically by the Program.

Click to expand/collapse What does the Search Engine work on?

To get the most out of WebSite X5's built-in Search Engine you need to know that:

§Pages

The items that the Search Engine considers in a page are the title, description and keywords (see the Page Properties |General window), as well as the text contents.

§Images / Videos

The Search Engine only considers images and videos that have been added to the SiteMap (see Image Object | Sitemap or Video/Audio Object | Sitemap) and it analyzes all the information that has been given: Title, Caption and Geographical position (e.g. Address, Town, etc) for the images; Title, Caption, Category, Website Keywords and Publication Date for videos.

§Products in the e-commerce shopping cart

The Search Engine extends its search to include all the products that have been added to the e-commerce shopping cart, analyzing the Name/Code and associated Description (see Product Settings | General).

§Blog

All the pages in your Blog are included in a search. The Search Engine analyzes the Title, Author, Category, Tag, Caption and Content of each Post.

§Members' Area

The pages with login and password access (inside a Members' Area) are not considered by the Search Engine, unless the user has already logged in.

§Hidden pages

Pages that are Hidden in the navigation menu are treated as normal pages for the purpose of the search.

§To exclude a page from the search

If you want to exclude a page from a search, select it from the Map, open the Page Properties window and, in the Expert section, deselect the Add this page to the Sitemap option.

§Uppercase/Lowercase

The Search Engine is not case-sensitive: it does not differentiate between upper and lowercase letters.

The various parameters that the Search Engine considers have different relevance: for example, the occurrences of elements in page titles are considered very relevant. Thus, the occurrences of some parameters are automatically multiplied by a correction factor before being associated with other occurrences. Depending on the number of occurrences, a element's relevance is calculated and it is positioned accordingly in the Search Results page.
Click to expand/collapse The Search Results pages

The Search Results pages are created automatically by the Program and show:

§the search field, which you see in the template's header or footer;

§a side menu, where you can choose whether to display the results for pages, the Blog, the e-commerce shopping cart, the images or the videos. Next to each item in this menu the number of results for it is given in brackets. If there are no results for a particular category, the item is not included in the menu;

§the list of results of the search, ordered according to their calculated relevance.

Remember that, in pages showing the results of searches on images and videos, you can click directly on an image or video in the list to open it in the page where it has been inserted.

The built-in Search Engine is particularly useful for websites that have a rich product catalog: the Search Results pages not only give a complete description of the products, but also include the "Buy now" button so that visitors can immediately order online.

The Search Results pages are created automatically by the Program: the style of these pages is defined in Step 4 - Advanced Settings, in the Styles and Models section and, the side menu can be defined in the Page Menu Style section.


The Box Model in WebSite X5

Further information >

The Box Model in WebSite X5

 Return to chapter overview

In WebSite X5 pages are created with the help of a page layout table and you can perfect the page design and layout by adjusting the margins in the Outer Margin and Inner Margin options in Cell Style | Style.

In order to fully understand what is meant by Margin, and so correctly lay out the contents, it must be clear which Box Model is being used.

When you write a web page's code, all the HTML elements are considered as boxes and the parameters that define the visual aspect of each box is called a Box Model. Each box consists of a basic number of components - margins, borders, padding and the actual content - and each one can be modified with CSS properties.

The diagram below illustrates the various components of the Box Model:

In WebSite X5 the default page layout table has a number of cells to which the page contents can be added. Each cell has the Box Model shown.

The elements are:

§Contents (in green): the contents are added to a cell by dragging one of the available objects into it.

§Padding (in pink): this is the space between the contents and the border.

§Border: the border surrounds the padding and contents. You can define the border's appearance in the Cell Style window.

§Margin (in yellow): this is the space between the border and the lines of the page layout table.

Given these definitions, the space between two adjacent objects (horizontally or vertically) is equal to the margins defined for the cells that the objects have been placed in.


RSS feeds: definitions and uses

Further information >

RSS feeds: definitions and uses

 Return to chapter overview
Show/Hide hidden text

Generally speaking, RSS (Rich Site Summary, or Really Simple Syndication) can be defined as one of the most popular formats for distributing web contents. From a technical point of view, however, an RSS feed is simply an XML file that contains structured information on the page it is linked to and on the contents of the page.

The principle behind RSS is simple: many websites, especially blogs, forums, press sites and portals include an RSS feed on their pages that displays constantly-updated news headlines and stories. If a user is interested, he can subscribe to a news reader, indicating the content he wants to receive. The news reader will constantly check for, and display, new stories.

RSS feeds offer a number of important advantages:

§a user saves time: the news reader looks for new stories for him;

§some news readers will show the news in text-only format, so that it can be viewed on mobile phones;

§the RSS mechanism lets people put together a made-to-measure website.

Click to expand/collapse About RSS

The RSS format was launched by Netscape in 1999, originally for use on the My Netscape.com portal. A second, simpler version was produced in the same year and then Netscape abandoned it.

The format was taken up by Dave Winer to use for his Userland content management software, and another group of developers started work on another syndication format based on RDF, one of the standard languages of W3C, and the specifications for RSS 1.0 were released at the end of 2000.

Winer carried on his own developments and published his RSS 2.0 in 2002. To differentiate his new version from the previous rel 1.0 of other developers, he changed the meaning of the acronym to "Really Simple Syndication".

At present, therefore, there are two versions of RSS that do practically the same things. Basically, RSS 2.0 is the more simple of the two, but RSS 1.0 is richer.

Fortunately the end-user doesn't have to worry about all these different versions: news readers read all of them! The problem is for those who produce feeds: which version is best for them?
Click to expand/collapse The news readers

News readers are programs that aggregate, interpret and display data written and distributed in a dialect of XML.

News readers have a lot in common with e-mail programs, using an interface that we are all used to for our e-mails. You usually see a list of your feed subscriptions in the top left. Select one and a list of headlines is shown in the top right. Underneath you have the content. Articles are indicated as "Read" or "Not Read".

Once you have subscribed to a feed, you open the news reader, download any updates and read the contents, just like e-mail.

News readers can be downloaded from the Internet, although a number of browsers now offer the same service: both Microsoft and Mozilla have integrated news reader functions into the latest versions of their browsers (Internet Explorer 7 and Mozilla Firefox 2.0) which display the contents of a feed in a much more user-friendly fashion than normal (already present on Apple's Safari). These browsers also have an autodiscovery link, which finds RSS and Atom feeds inside a website and informs the user.
Click to expand/collapse How and where to find feeds to subscribe to

These icons are often used to indicate the presence of feeds you can subscribe to:

Sometimes, you may see the word "Syndication".

Usually there is a simple link to the RSS document. To subscribe to a feed you have to extract the URL (rightclick on the image > copy link) and paste it into the field that every program has for adding a new feed.

Click to expand/collapse RSS feeds in WebSite X5

You can create and manage RSS feeds in WebSite X5 without worrying about code. Only some general parameters are required and some news articles to propose. The Program produces the XML files automatically, using the RSS 2.0 format.

When an RSS feed is open, you can make it available on the website by adding a link or a button (similar to those above), maybe putting it in the header. Use WebSite X5's link in the Link window to create the button.


The website navigation structure

Further information > RSS feeds: definitions and uses >

The website navigation structure

 Return to chapter overview
Show/Hide hidden text

Once you have designed your website and decided on the contents, you should have a clear idea of how your visitors can best navigate in it. You need to establish the fixed navigation, which includes menu items that need to be present on every page, and local navigation, which includes the context menus in the main areas of the website. You can add menus with service links to fixed and local navigation, and these must be in a specific place, which is distinct from the website's macro-areas.

Fixed navigation menus are usually in a horizontal band at the top of the page, whereas context menus are vertical, on the left side of the page. If you have a lot of main areas, or you want to make the site appear more dynamic, you can place the fixed navigation menu vertically.

In WebSite X5 the navigation structure is defined in two stages:

- | In the Template selection window or in the Custom Template window: choose either a Vertical menu if you want the fixed navigation menu the first lefthand column of the page, or Horizontal menu for horizontal fixed navigation.
- | In the Sitemap Creation window: create the website's tree structure, adding levels and pages. The tree structure has various levels of indentation: first-level items correspond to the items in the fixed navigation menu: the items in the other levels are used for local navigation.

WebSite X5 automatically generates the website's SiteMap, according to the menu types and the website map.

Remember that all the items in the navigation menu are created as simple textual links in the page's HTML code and then handled by a stylesheet (CSS) linked to them. This type of code offers the following advantages:

§correct functioning on the main Browsers, even when navigatiing with JavaScript disabled;

§correct indexing by search engines that can go through the entire site, thanks to the links in the pages.

WebSite X5 also proposes:

§displaying context menus on the left or on the right of the page, selecting the Show Page Menu option in the Step 4 - Page Menu Style window;

§repeating fixed navigation items at the bottom of the page, opening Step 4 - Styles and Models, selecting Page Item "Footer Menu" and then selecting the Visible option;

§displaying the menu as "breadcrumbs", selecting the Visible for the'Page Item "Page Path" in the Step 4 - Styles and Models window;

§a service menu in the top banner, with the possibility of inserting pictures and links with the editor in the Edit Graphic Template window.

As well as fixed and contextual navigation, websites usually have internal links, which make the original tree structure more complete and complex and create alternative paths to follow in finding information: in WebSite X5 you can create this type of link on text and images, using the Insert link command.

Other factors which influence the quality of a website's navigation structure are:

Click to expand/collapse Button labels

Button labels (the names on the button) are a crucial factor in determining the quality of a website's navigation structure. The names you choose must be clear and comprehensible: prefer common names used in other sites rather than new names which could cause confusion.

In WebSite X5 the labels on the menu buttons correspond to the names given to levels and pages when creating the website Map (see Sitemap Creation). These names are automatically used for the page titles and the names of the HTML files of the pages. Use the options in the Page Properties window to change the title and file name for a page. In this way, you can diversify texts to define adequate menu button labeling and give titles to improve both the comprehension of the text and search engine indexing.
Click to expand/collapse The text used in a hypertext link

Usability tests show that menus are not always the main way visitors access information on a website. Often, when we visit new sites, we tend to use the links we find in the pages to move around, rather than select a page from the menus.

Briefly, the text to be used as a link must be concise, explanatory and make sense out of context.

§Meaningless text

Links must maintain their meaning even when they are out of context: expressions such as "click here", "more information", "info", which are superfluous when they start a sentence, are to be avoided. A mere "click here" gives no information on what information is going to follow the link: it has little meaning both for visitors and for search engines, that often use these texts to judge the link's relevance.

§Length of links

It's difficult to say how long the text of a link should be. Generally speaking, it should be long enough to express what it's for: it must be as concise as possible, without losing its meaning.

§URLs in links

Sometimes it is useful to use a URL as a link (for example, http://www.mywebsite.com). Remember, though, that not all URLs are significant and they are also often quite long. It may be better to change the text of a link, to make it more meaningful.

§Alternative text for linked images

When an image is used as a link, the alternative (ALT) text has the same function as the text of a hypertext link. When you write alternative text for an image, remember that you don't have to specify that it is a link, and the aim of the ALT text is not to describe an image but to provide text content that adequately replaces it. So if you have a picture of a button with the word "Products" on it, the alternative text could simply be "Products".

Click to expand/collapse The look of the link

Another factor that influences the quality of your navigation structure is the aspect of the links, their design.

§Underlining

A visitor must be able to instantly recognize the links in a page: it is very frustrating to click on text that you think is a link, and then nothing happens, or move the mouse haphazardly around the page, hoping it will change to a little hand, but never does.

By default, browsers underline all the links: you can remove this, but you shouldn't do in most cases. Underling links has become a recognized standard, and only in main menu items is it not so often used. Using color to distinguish links is not a good idea, because it reduces your website's accessibility: colored links don't show up on a gray-scale monitor or on a page printed in B/W, and color-blind people will not see them.

§Colors

Browsers usually show unvisited links in blue and visited links in red: it will make your website navigation a more pleasant experience if you adhere to the conventions. You can, however, suggest different colors, but remember to respect the contrast between foreground and background, and be coherent with the use of the colors for visited and unvisited links.

§Hover and Focus effects

Many sites use special effects for different states of links. This is certainly positive in terms of site accessibility, as it helps the visitor understand which link is being focused on.

WebSite X5 lets you customize the aspect of both the buttons in the navigation menus and the hypertext links in the pages:

§In the Step 4 - Advanced Settings section you will find the windows for working on menu styles (see Main Menu Style, Drop Down Menu Style and Page Menu Style) and, with the built-in editor, you can obtain 3D buttons with mouseover effects.

§The options for changing the style of hypertext links can be found in the Step 4 - Advanced Settings section, in the Styles and Models window.
Click to expand/collapse Link destinations

A good-quality site will always tell the visitor what to expect when he follows a link.

§Links to non-HTML resources

Visitors should be warned if a link opens a resource that is not a website page, such as a PDF, Word or PowerPoint file, etc. Browsers do not give this information, so it is up to the author to indicate what type of file will be opened.

§Links to new windows, popups or other websites

Visitors should be warned if a link will open a new window or a popup: without a warning, visitors could be confused as to where they are, without realizing they are in a new window, and have difficulty returning to where they started from. Again, it up to the site author to provide adequate information, such as "opens in a new window".

WebSite X5 lets you set up links in text and images, so you can include a description for each link.

To define the content and style of Tooltips, see the Description section in the Link window.
Click to expand/collapse Internal "skip links"

As well as links in the navigation menus and in the pages, WebSite X5 also automatically creates and adds links and anchors that remain invisible during normal navigation with the browser.

We are talking about skip links, that are added in strategic parts of the page so that visitors can move freely around the contents without using navigation links, or to go to the navigation links, bypassing the contents. Skip links aren't displayed by visual browsers. They are, however, visible when stylesheets are disabled.

If skip links are used, after the site title, the first-level items of the navigation menu are displayed: the main page contents follow, with submenus, notes and links to footnotes. A page organization of this type is thought to highlight the contents, so improving search engine indexing and better usability on mobile devices.

Starting from the structure defined in the Sitemap Creation, WebSite X5 creates and links the linked website Map to the code of the pages: the website Map is also used by search engines for indexing. This Map can be useful for visitors to find their way around a site: the link to display is added automatically at the bottom of the page (see Styles and Models ) and/or it can be created in the Link window.


Blog: characteristics and features

Further information >

Blog: characteristics and features

 Return to chapter overview
Show/Hide hidden text

Wikipedia defines a Blog as an online diary.

The word "blog" comes from a contraction of "web log". The term "weblog" was introduced in 1997 by Jorn Barger who used it on his own website: the truncated "blog" term was coined by Peter Merholz who, in 1999, used the phrase "we blog" on his website, thus creating the verb "to blog".

Weblogs come from the grass roots, and immediately appealed because normal people could use the web to express themselves, with whatever they wanted to say. It became popular in America around 2001, and then exploded all over the world. It became a fashion in Italy when the first free blog providers appeared.

Blogs are characterized by their structure, their contents and their form in which the contents are written.

Click to expand/collapse The structure

A blog is a website, and the person who writes the blog is called a blogger. You can publish anything on a blog: it's yours and you can do what you like with it. It often becomes a sort of personal online diary.

Blogs usually have a fairly standard structure, where each article (post) is numbered and in a page of its own. Each blog page, therefore, contains a post and the comments that visitors may have left on that post. Posts are usually organized in categories (threads) which constitute one of the two most common folders for posts. The second folder is where posts are stored by their date: you can look through posts made during a specific time interval, usually one month. Posts are stored in the order they arrive, from the newest to the oldest, and they may contain photos, audio, video and links to other sites. Each post is recognizable via a permalink, which is a direct link to an article. The section that contains the links to other blogs is called a blogroll.

Blogs may offer accessories, such as a search engine and RSS feeds: blogs are normally updated frequently and so these accessories may be useful to visitors looking for something in particular in the contents.

Click to expand/collapse The contents

The real essence of a blog is its contents: messages are usually halfway between a headline and an article, and they often give a short summary, a bit like the structure of an RSS feed.

Contents are usually related to one of the categories, and they are published in chronological order. They can be about any subject. Most bloggers use blogs as personal diaries to tell other people what they think about a particular topic. Readers can follow links to pass from one blog to another, so moving through the blogsphere. Many journalists, authors and politicians now use blogs, to keep in touch with their readers and voters on almost a day-to-day basis. Blogs don't have deadlines to be published by, and so appeal to people who want to talk about themselves, without worrying about keeping to rigid schemes.
Click to expand/collapse The form

Blogs are usually written in the first person, because they are the thoughts and expressions of the authors themselves. Blogs are often described as a written monologue.

Even companies and commercial organizations use the first person for writing their blogs. It's more informal and direct: if you write a blog, it's because you want to get in touch with the outside world and so you use the most immediate means you can
Click to expand/collapse The blog in WebSite X5

WebSite X5 makes handling a blog very easy. You can quickly write and publish your posts: you can elaborate on your articles with pictures, videos and audio. Comments can be handled easily: you can use the online Control Panel to approve comments before publishing them and organize how they are to be displayed.

There is a search engine, a list of recent posts, an archive by category or month by month, and you can add clouds to your blog page.

WebSite X5 takes care of all the technical aspects, and you just have to decide what to write about! Bear in mind the following points for a successful blog:

§Decide what kind of blog you want to create. It's best to have some sort of identity, and a title that summarizes the blog in a word or two.

§Write at least one post a day, or try to be as regular as possible. Institutional blogs should have their posts calendarized: people expect news on a regular basis, and don't like to be disappointed.

§Write and add material for at least a month before you actually publish anything. This gives you time to evaluate the result and make any corrections, so you can be sure your blog is pointing in the right direction.

§When you are satisfied with how your blog is progressing, talk about it with friends, colleagues and neighbors: you may be surprised by the feedback!

§To increase its popularity on the Internet, try to link your blog to others that talk about similar subjects. You will need to read other posts and leave comments, remembering to leave a link to your own blog. be careful not to break any of the editorial rules on the blogs you visit.

§Build up a network of contacts with other people in the blogsphere and meet people online: that's a good way to get your blog read.

If you manage to make your blog popular, and with a good name, you could consider the possibility of using it to earn money, adding adverts and so on.


The online Control Panel

Further information >

The online Control Panel

 Return to chapter overview

WebSite X5 automatically sets up an online Control Panel for each website created with the Program. It is used by Site Administrators to handle comments on posts in the Blog or messages added to the Guestbook, and to obtain diagnostic information on the website.

Users in the Administrators group, created in the Access Management section of Step 4 - Advanced Settings can access it.

To access the Control Panel:

§Connect to the http://www.mywebsite.com/admin URL, where http://www.mywebsite.com is the website's URL.

§Enter your login name and password.

When you have logged in, you will see these sections in the Control Panel:

§Blog: for handling comments made by visitors on the posts of the Blog linked to the website (see How to handle comments in the Blog and Guestbook from the online Control Panel)

§Guestbook: for handling messages left by visitors in the Guestbook you can add using the Guestbook Object.

§WebSite Test: to display diagnostic information on the website and the Server it has been published on. The information is about:

-PHP Version - the Server must support the PHP language for the e-mails of the E-mail Form Object and Shopping Cart to work properly, as well as login and password access to Locked pages. If PHP is supported, the supported version is indicated.

-Session support - As well as supporting PHP, the Server must also support sessions so that only authorized users with a login and password can access Locked pages.

-Write-access folder - To be able to store and handle comments on Posts in the Blog and Guestbook Object, there must a folder on the Server with write-access. The presence of this folder is checked, and then it is checked for write-permission.

-MySQL support and database settings - When you compose a E-mail Form Object you can specify that submitted data is sent to a database (see E-mail Form Object | Send): you will need to give some parameters to connect to the database you want to use on the Server. The Server is checked for MySQL support, and then the parameters you have specified are checked that they effectively give access to the database.


Information and Assistance

Information and Assistance

 Return to chapter overview

is a Incomedia product

www.websitex5.com

www.incomedia.eu

Copyright 2013 Incomedia. All rights reserved.

WebSite X5 uses DotNetZip, covered by a MS-PL License (Microsoft Public License)

WebSite X5 uses Cef, covered by a LBSD 3 License.

WebSite X5 uses Cef Sharp, covered by a BSD 2 License.

For more information and technical assistance visit our website: www.websitex5.com/help


License BSD 3

License BSD 3

Copyright (c) 2008-2012 Marshall A. Greenblatt. Portions Copyright (c)

2006-2009 Google Inc. All rights reserved.

Redistribution and use in source and binary forms, with or without

modification, are permitted provided that the following conditions are

met:

* Redistributions of source code must retain the above copyright

notice, this list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above

copyright notice, this list of conditions and the following disclaimer

in the documentation and/or other materials provided with the

distribution.

* Neither the name of Google Inc. nor the name Chromium Embedded

Framework nor the names of its contributors may be used to endorse

or promote products derived from this software without specific prior

written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


License BSD 2

License BSD 2

Copyright (c) 2012, Anthony Taranto.

Redistribution and use in source and binary forms, with or without

modification, are permitted provided that the following conditions are

met:

* Redistributions of source code must retain the above copyright

notice, this list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above

copyright notice, this list of conditions and the following disclaimer

in the documentation and/or other materials provided with the

distribution.

* Neither the name of Google Inc. nor the name Chromium Embedded

Framework nor the name CefSharp nor the names of its contributors

may be used to endorse or promote products derived from this software

without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


Microsoft Public License (Ms-PL)

Microsoft Public License (Ms-PL)

 Return to chapter overview

This license governs use of the accompanying software. If you use the software, you accept this license. If you do not accept the license, do not use the software.

1. Definitions

The terms "reproduce," "reproduction," "derivative works," and "distribution" have the same meaning here as under U.S. copyright law.

A "contribution" is the original software, or any additions or changes to the software.

A "contributor" is any person that distributes its contribution under this license.

"Licensed patents" are a contributor's patent claims that read directly on its contribution.

2. Grant of Rights

(A) Copyright Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free copyright license to reproduce its contribution, prepare derivative works of its contribution, and distribute its contribution or any derivative works that you create.

(B) Patent Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free license under its licensed patents to make, have made, use, sell, offer for sale, import, and/or otherwise dispose of its contribution in the software or derivative works of the contribution in the software.

3. Conditions and Limitations

(A) No Trademark License- This license does not grant you rights to use any contributors' name, logo, or trademarks.

(B) If you bring a patent claim against any contributor over patents that you claim are infringed by the software, your patent license from such contributor to the software ends automatically.

(C) If you distribute any portion of the software, you must retain all copyright, patent, trademark, and attribution notices that are present in the software.

(D) If you distribute any portion of the software in source code form, you may do so only under this license by including a complete copy of this license with your distribution. If you distribute any portion of the software in compiled or object code form, you may only do so under a license that complies with this license.

(E) The software is licensed "as-is." You bear the risk of using it. The contributors give no express warranties, guarantees or conditions. You may have additional consumer rights under your local laws which this license cannot change. To the extent permitted under your local laws, the contributors exclude the implied warranties of merchantability, fitness for a particular purpose and non-infringement.


print_copyright

print_copyright

© Copyright 2013 Incomedia. All rights reserved.

Le informazioni contenute in questo manuale possono essere soggette a modifiche senza alcun preavviso. Nessuna parte di questo manuale può essere riprodotta o trasmessa in qualsiasi forma o con qualsiasi mezzo, elettronico o meccanico, per qualsiasi scopo, senza l'espresso consenso scritto di Incomedia.

Si ricorda che filmati, suoni o immagini che si desidera utilizzare nei progetti possono essere soggetti a diritto d'autore. L'inserimento non autorizzato di tali materiali potrebbe, dunque, rappresentare una violazione dei diritti di autore ed è bene accertarsi di poterne fare uso liberamente o ottenere i permessi necessari dai rispettivi autori o dagli enti preposti.

Incomedia, WebSite X5, WebSite X5 Evolution sono marchi registrati di Incomedia s.r.l. Altri marchi o nomi di prodotti citati nel presente documento sono marchi o marchi registrati dei rispettivi proprietari.

Scritto e impaginato da Incomedia s.r.l.